152 lines
7.4 KiB
PHP
152 lines
7.4 KiB
PHP
<div class="space-y-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<flux:heading size="lg">Map Settings</flux:heading>
|
|
<flux:subheading>Configure map providers and API keys</flux:subheading>
|
|
</div>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if (session('error'))
|
|
<div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{{-- Providers Status --}}
|
|
<div class="bg-white shadow rounded-lg border border-zinc-200">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<flux:heading size="base" class="mb-4">Map Providers Status</flux:heading>
|
|
|
|
<div class="space-y-3">
|
|
@foreach($providersStatus as $key => $provider)
|
|
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="flex-shrink-0">
|
|
@if($provider['enabled'])
|
|
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
|
|
@else
|
|
<div class="w-3 h-3 bg-red-500 rounded-full"></div>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<div class="font-medium">{{ $provider['name'] }}</div>
|
|
<div class="text-sm text-gray-500">
|
|
{{ $provider['free'] ? 'Free' : 'Premium' }}
|
|
@if($provider['requires_api_key'])
|
|
• Requires API Key
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
@if($provider['enabled'])
|
|
<span class="text-green-600 text-sm font-medium">✓ Enabled</span>
|
|
@else
|
|
<span class="text-red-600 text-sm font-medium">⚠ Disabled</span>
|
|
@endif
|
|
|
|
<flux:button wire:click="testProvider('{{ $key }}')" variant="ghost" size="xs">
|
|
Test
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- API Keys Configuration --}}
|
|
<div class="bg-white shadow rounded-lg border border-zinc-200">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<flux:heading size="base" class="mb-4">API Keys Configuration</flux:heading>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<flux:label for="default_provider">Default Map Provider</flux:label>
|
|
<flux:select wire:model="defaultProvider" id="default_provider" class="w-full">
|
|
@foreach($providersStatus as $key => $provider)
|
|
<option value="{{ $key }}" {{ !$provider['enabled'] ? 'disabled' : '' }}>
|
|
{{ $provider['name'] }} {{ $provider['free'] ? '(Free)' : '(Premium)' }}
|
|
{{ !$provider['enabled'] ? '(Disabled)' : '' }}
|
|
</option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:description>Choose your preferred map provider</flux:description>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:label for="google_api_key">Google Maps API Key</flux:label>
|
|
<flux:input
|
|
type="password"
|
|
wire:model="googleMapsApiKey"
|
|
id="google_api_key"
|
|
placeholder="AIza..."
|
|
class="w-full" />
|
|
<flux:description>
|
|
Get your API key from
|
|
<a href="https://console.cloud.google.com/apis/credentials" target="_blank" class="text-blue-600 hover:underline">
|
|
Google Cloud Console
|
|
</a>
|
|
</flux:description>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:label for="mapbox_api_key">Mapbox API Key</flux:label>
|
|
<flux:input
|
|
type="password"
|
|
wire:model="mapboxApiKey"
|
|
id="mapbox_api_key"
|
|
placeholder="pk.ey..."
|
|
class="w-full" />
|
|
<flux:description>
|
|
Get your API key from
|
|
<a href="https://account.mapbox.com/access-tokens/" target="_blank" class="text-blue-600 hover:underline">
|
|
Mapbox Account
|
|
</a>
|
|
</flux:description>
|
|
</div>
|
|
|
|
<flux:button wire:click="saveSettings" variant="primary" class="w-full">
|
|
Save Settings
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Instructions --}}
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
|
|
<flux:heading size="sm" class="mb-3">📋 Setup Instructions</flux:heading>
|
|
<div class="space-y-2 text-sm">
|
|
<p><strong>Free Options (No API Key Required):</strong></p>
|
|
<ul class="list-disc list-inside ml-4 space-y-1">
|
|
<li><strong>OpenStreetMap:</strong> Completely free, community-driven maps</li>
|
|
<li><strong>CartoDB:</strong> Free tier with light, dark, and voyager styles</li>
|
|
<li><strong>Satellite (Esri):</strong> Free satellite imagery</li>
|
|
</ul>
|
|
|
|
<p class="mt-4"><strong>Premium Options (API Key Required):</strong></p>
|
|
<ul class="list-disc list-inside ml-4 space-y-1">
|
|
<li><strong>Google Maps:</strong> Industry standard with excellent geocoding</li>
|
|
<li><strong>Mapbox:</strong> Beautiful custom styles and excellent performance</li>
|
|
</ul>
|
|
|
|
<p class="mt-4"><strong>To add API keys:</strong></p>
|
|
<ol class="list-decimal list-inside ml-4 space-y-1">
|
|
<li>Add your API keys to the <code>.env</code> file:</li>
|
|
<li><code>GOOGLE_MAPS_API_KEY=your_google_api_key_here</code></li>
|
|
<li><code>MAPBOX_API_KEY=your_mapbox_api_key_here</code></li>
|
|
<li>Restart your application: <code>php artisan serve</code></li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|