@extends('admin.layout.master')

@section('css')
    <x-vendor.leaflet-css />
    <style>
        #city-show-map {
            width: 100%;
            height: 420px;
            border-radius: .5rem;
            position: relative;
            z-index: 0;
            background: #e8e8e8;
        }

        #city-show-map.leaflet-container .leaflet-tile-pane img,
        #city-show-map.leaflet-container img.leaflet-tile {
            max-width: none !important;
            max-height: none !important;
        }
    </style>
@endsection

@section('content')
    <section id="multiple-column-form">
        <div class="row match-height">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{__('admin.show')}}</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <x-admin.image name="image" :model="$city->image" :show="true" :label="__('image')" />
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.city_name')}} - {{__('site.name_en')}}</span>
                                        <div class="controls">
                                            <p class="form-control-static">{{ $city->getTranslations('name')['en'] ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.city_name')}} - {{__('site.name_ar')}}</span>
                                        <div class="controls">
                                            <p class="form-control-static">{{ $city->getTranslations('name')['ar'] ?? '-' }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{__('admin.country')}}</span>
                                        <div class="controls">
                                            <p class="form-control-static">{{ $city->country->getTranslations('name')[app()->getLocale()] ?? $city->country->name }}</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{ __('admin.use_custom_price') }}</span>
                                        <div class="controls">
                                            <p class="form-control-static">
                                                {{ $city->use_custom_price ? __('admin.yes') : __('admin.no') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{ __('admin.price_per_minute') }}</span>
                                        <div class="controls">
                                            <p class="form-control-static">
                                                @if ($city->use_custom_price && $city->price_per_minute !== null)
                                                    {{ number_format($city->price_per_minute, 2) }} {{ __('admin.currency') }}
                                                @else
                                                    {{ __('admin.uses_global_price', ['price' => number_format((float) (settings()['ride_price_per_minute'] ?? 0.45), 2)]) }}
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group">
                                        <span class="d-block mb-50">{{ __('admin.city_region_map') }}</span>
                                        <div id="city-show-map"></div>
                                    </div>
                                </div>

                                <div class="col-12 d-flex justify-content-center mt-3">
                                    <a href="{{ route('admin.cities.edit', $city->id) }}" class="btn btn-info mr-1 mb-1">{{__('admin.edit')}}</a>
                                    <a href="{{ url()->previous() }}" class="btn btn-outline-warning mr-1 mb-1">{{__('admin.back')}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    <x-vendor.leaflet-js />
    <script>
        (function () {
            'use strict';

            const coordinates = @json($city->coordinates ?? []);
            const tileUrl = globalThis.BEEB_OSM_TILE_URL || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            const map = L.map('city-show-map').setView([24.7136, 46.6753], 6);

            L.tileLayer(tileUrl, {
                subdomains: ['a', 'b', 'c'],
                maxZoom: 19,
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            }).addTo(map);

            if (Array.isArray(coordinates) && coordinates.length >= 3) {
                const polygon = L.polygon(coordinates, {
                    color: '#3388ff',
                    fillColor: '#3388ff',
                    fillOpacity: 0.25,
                    weight: 2,
                }).addTo(map);

                map.whenReady(function () {
                    map.fitBounds(polygon.getBounds(), { padding: [30, 30], maxZoom: 12 });
                    map.invalidateSize();
                });
            }

            $(window).on('load', function () {
                map.invalidateSize();
            });

            setTimeout(function () { map.invalidateSize(); }, 2800);
        })();
    </script>
@endsection