@extends('layouts.admin')
@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.show') }} {{ trans('cruds.availableStore.title') }}
    </div>

    <div class="card-body">
        <div class="form-group">
            <div class="form-group">
                <a class="btn btn-default" href="{{ route('admin.available-stores.index') }}">
                    {{ trans('global.back_to_list') }}
                </a>
            </div>
            <table class="table table-bordered table-striped">
                <tbody>
                    <tr>
                        <th>
                            {{ trans('cruds.availableStore.fields.id') }}
                        </th>
                        <td>
                            {{ $availableStore->id }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.availableStore.fields.store_code') }}
                        </th>
                        <td>
                            {{ $availableStore->store_code }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.availableStore.fields.store_name') }}
                        </th>
                        <td>
                            {{ $availableStore->store_name ? $availableStore->store_name : '' }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.availableStore.fields.store_address') }}
                        </th>
                        <td>
                            {{ $availableStore->store_address }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.availableStore.fields.registration_no') }}
                        </th>
                        <td>
                            {{ $availableStore->registration_no }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.availableStore.fields.state') }}
                        </th>
                        <td>
                            {{ $availableStore->state ? $availableStore->state->province_name : '' }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.availableStore.fields.city') }}
                        </th>
                        <td>
                            {{ $availableStore->city ? $availableStore->city->city_name : '' }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.availableStore.fields.category') }}
                        </th>
                        <td>
                            {{-- @foreach($availableStore->categories as $key => $category)
                                <span class="badge badge-info">{{ $category->category_name }}</span>
                            @endforeach --}}
                            {{ $availableStore->merchandiseCategory ? $availableStore->merchandiseCategory->category_name : '' }}
                        </td>
                    </tr>
                    <tr>
                        <th>
                            {{ trans('cruds.availableStore.fields.status') }}
                        </th>
                        <td>
                            {{ $availableStore->status ? \App\Models\AvailableStore::STATUS_SELECT[$availableStore->status] : '' }}
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="form-group">
                <a class="btn btn-default" href="{{ route('admin.available-stores.index') }}">
                    {{ trans('global.back_to_list') }}
                </a>
            </div>
        </div>
    </div>
</div>
{{-- 
<div class="card">
    <div class="card-header">
        {{ trans('global.show') }} Store Location
    </div>
    <div class="card-body">
        <table class="table table-bordered table-striped">
            <tbody>
                <tr>
                    <th>
                        Store Address
                    </th>
                    <td>
                        {{ $availableStore->store_address }}
                    </td>
                </tr>
                <tr>
                    <th>
                        Address Latitude
                    </th>
                    <td>
                        {{ $availableStore->address_latitude }}
                    </td>
                </tr>
                <tr>
                    <th>
                        Address Longitude
                    </th>
                    <td>
                        {{ $availableStore->address_longitude }}
                    </td>
                </tr>
            </tbody>
        </table>

        <iframe
          width="100%"
          height="430"
          id="google-iframe"
          frameborder="0" style="border:0"
          src="https://maps.google.com/maps?q={{ $availableStore->google_map_parameter }}&t=&z=13&ie=UTF8&iwloc=&output=embed" allowfullscreen>
        </iframe>
        <div class="form-group">
            <div id="map" style="height: 400px;"></div>
        </div>
        <div class="form-group">
            <a class="btn btn-default" href="{{ route('admin.available-stores.index') }}">
                {{ trans('global.back_to_list') }}
            </a>
        </div>
    </div>
</div> --}}

@endsection

@section('scripts')
<script type="text/javascript">
    let map, marker, pos;

    function initMap(){
        pos = { lat: {{ $availableStore->address_latitude }}, lng: {{ $availableStore->address_longitude }}};
        map = new google.maps.Map(document.getElementById("map"), {
            center: pos,
            zoom: 10,
        });

        marker = new google.maps.Marker({
            position: pos,
            animation: google.maps.Animation.DROP,
            map,
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initMap"></script>
@endsection