@extends('backEnd.layouts.master')
@section('title','Map API Settings')

@section('css')
<style>
    .card-box { background:#fff; padding:1.5rem; box-shadow:0 .75rem 1.5rem rgba(18,38,63,.03); margin-bottom:24px; border-radius:.25rem; border:1px solid #edf2f9; }
    .card-header-custom { background:#f8f9fa; padding:15px; border-bottom:1px solid #eee; margin:-1.5rem -1.5rem 1.5rem -1.5rem; border-radius:.25rem .25rem 0 0; display:flex; align-items:center; gap:10px; }
    .card-header-custom h4 { margin:0; font-size:15px; font-weight:700; color:#343a40; text-transform:uppercase; }
    .switch { position:relative; display:inline-block; width:50px; height:26px; margin-bottom:0; }
    .switch input { opacity:0; width:0; height:0; }
    .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; transition:.4s; border-radius:34px; }
    .slider:before { position:absolute; content:""; height:18px; width:18px; left:4px; bottom:4px; background-color:white; transition:.4s; border-radius:50%; }
    input:checked + .slider { background-color:#28a745; }
    input:checked + .slider:before { transform:translateX(24px); }
    .env-badge { font-size:10px; background:#e8f5e9; color:#2e7d32; padding:2px 7px; border-radius:10px; font-weight:600; vertical-align:middle; }
    .provider-card { border:2px solid #e5e7eb; border-radius:10px; padding:16px; cursor:pointer; transition:all 0.2s; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
    .provider-card:hover { border-color:#9ca3af; background:#f9fafb; }
    .provider-card.selected { border-color:#2563eb; background:#eff6ff; box-shadow:0 0 0 1px #2563eb; }
    .provider-card input[type="radio"] { display:none; }
    .provider-icon { width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
    .provider-icon.google { background:#ea4335; color:#fff; }
    .provider-icon.osm { background:#7cbc39; color:#fff; }
    .provider-icon.maplibre { background:#1e40af; color:#fff; }
    .provider-info strong { display:block; font-size:14px; color:#111; }
    .provider-info small { font-size:12px; color:#6b7280; }
    .provider-badge { font-size:10px; padding:2px 8px; border-radius:10px; font-weight:600; }
    .provider-badge.free { background:#dcfce7; color:#166534; }
    .provider-badge.paid { background:#fef3c7; color:#92400e; }
    .provider-settings { display:none; margin-top:12px; padding:15px; background:#f8fafc; border-radius:8px; border:1px solid #e5e7eb; }
    .provider-settings.active { display:block; }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between" style="padding:20px 0;">
                <h4 class="mb-0 font-size-18">Map API Settings</h4>
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                    <li class="breadcrumb-item active">Map API</li>
                </ol>
            </div>
        </div>
    </div>

    <form action="{{ route('googlemap.update') }}" method="POST">
        @csrf

        <div class="row">
            <div class="col-xl-7">

                {{-- Map Enable/Disable Toggle --}}
                <div class="card-box">
                    <div class="card-header-custom" style="background:#f0fdf4;">
                        <i class="fas fa-power-off" style="color:#16a34a;"></i>
                        <h4>Map Status</h4>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="d-flex justify-content-between align-items-center border p-3 rounded"
                                 style="border-color:#16a34a !important; background:#f0fdf4;">
                                <div>
                                    <h6 class="mb-1" style="color:#16a34a;">Enable Map on Checkout</h6>
                                    <small class="text-muted">Turn map feature ON/OFF globally</small>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" value="1" name="MAP_ENABLED"
                                        @if(env('MAP_ENABLED', '1') == '1') checked @endif>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex justify-content-between align-items-center border p-3 rounded"
                                 style="border-color:#fd7e14 !important; background:#fff8f0;">
                                <div>
                                    <h6 class="mb-1" style="color:#fd7e14;">Mandatory Map Location</h6>
                                    <small class="text-muted">Require map location selection at checkout</small>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" value="1" name="MAP_MANDATORY"
                                        @if(env('MAP_MANDATORY') == '1') checked @endif>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <p class="text-muted small mb-0">
                        <i class="fas fa-info-circle"></i>
                        <strong>Map Enabled</strong> — When OFF, the map section is completely hidden from checkout.<br>
                        <strong>Mandatory Map</strong> — When ON, customers <strong>must</strong> select their location on the map before placing an order.
                    </p>
                </div>

                {{-- Map Provider Selection --}}
                <div class="card-box">
                    <div class="card-header-custom">
                        <i class="fas fa-map" style="color:#2563eb;"></i>
                        <h4>Select Map Provider</h4>
                    </div>
                    <p class="text-muted small mb-3">
                        Choose which map engine to use on the checkout page. Only one provider can be active at a time.
                    </p>

                    @php $currentProvider = env('MAP_PROVIDER', 'leaflet'); @endphp

                    {{-- Google Maps --}}
                    <label class="provider-card {{ $currentProvider == 'google' ? 'selected' : '' }}" id="provider_card_google">
                        <input type="radio" name="MAP_PROVIDER" value="google" {{ $currentProvider == 'google' ? 'checked' : '' }}>
                        <div class="provider-icon google"><i class="fab fa-google"></i></div>
                        <div class="provider-info flex-grow-1">
                            <strong>Google Maps</strong>
                            <small>High-quality maps with Places Autocomplete & Geocoding</small>
                        </div>
                        <span class="provider-badge paid">API Key Required</span>
                    </label>
                    <div class="provider-settings {{ $currentProvider == 'google' ? 'active' : '' }}" id="settings_google">
                        <div class="form-group mb-2">
                            <label class="font-weight-bold">Google Maps API Key</label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-key"></i></span></div>
                                <input type="text" class="form-control" name="GOOGLE_MAPS_API_KEY"
                                    value="{{ old('GOOGLE_MAPS_API_KEY', env('GOOGLE_MAPS_API_KEY')) }}"
                                    placeholder="AIzaSy...">
                            </div>
                            <small class="text-muted">Get your API key from <a href="https://console.cloud.google.com/google/maps-apis" target="_blank">Google Cloud Console</a></small>
                        </div>
                        <div class="form-group mb-0">
                            <label class="font-weight-bold">Android App API Key <small class="text-muted">(optional)</small></label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fab fa-android"></i></span></div>
                                <input type="text" class="form-control" name="ANDROID_APP_API_KEY"
                                    value="{{ old('ANDROID_APP_API_KEY', env('ANDROID_APP_API_KEY')) }}"
                                    placeholder="Android-specific API key...">
                            </div>
                        </div>
                    </div>

                    {{-- OpenStreetMap (Leaflet) --}}
                    <label class="provider-card {{ $currentProvider == 'leaflet' ? 'selected' : '' }}" id="provider_card_leaflet">
                        <input type="radio" name="MAP_PROVIDER" value="leaflet" {{ $currentProvider == 'leaflet' ? 'checked' : '' }}>
                        <div class="provider-icon osm"><i class="fas fa-leaf"></i></div>
                        <div class="provider-info flex-grow-1">
                            <strong>OpenStreetMap (Leaflet)</strong>
                            <small>Free, open-source maps using OpenStreetMap tiles</small>
                        </div>
                        <span class="provider-badge free">Free — No API Key</span>
                    </label>
                    <div class="provider-settings {{ $currentProvider == 'leaflet' ? 'active' : '' }}" id="settings_leaflet">
                        <p class="text-muted small mb-0"><i class="fas fa-check-circle text-success"></i> OpenStreetMap is free and requires no API key. It uses Nominatim for geocoding.</p>
                    </div>

                    {{-- MapLibre GL JS --}}
                    <label class="provider-card {{ $currentProvider == 'maplibre' ? 'selected' : '' }}" id="provider_card_maplibre">
                        <input type="radio" name="MAP_PROVIDER" value="maplibre" {{ $currentProvider == 'maplibre' ? 'checked' : '' }}>
                        <div class="provider-icon maplibre"><i class="fas fa-globe-americas"></i></div>
                        <div class="provider-info flex-grow-1">
                            <strong>MapLibre GL JS</strong>
                            <small>Modern, customizable vector maps — self-host or use cloud tiles</small>
                        </div>
                        <span class="provider-badge paid">API Key / Style URL</span>
                    </label>
                    <div class="provider-settings {{ $currentProvider == 'maplibre' ? 'active' : '' }}" id="settings_maplibre">
                        <div class="form-group mb-2">
                            <label class="font-weight-bold">MapLibre Style URL <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-link"></i></span></div>
                                <input type="text" class="form-control" name="MAPLIBRE_STYLE_URL"
                                    value="{{ old('MAPLIBRE_STYLE_URL', env('MAPLIBRE_STYLE_URL')) }}"
                                    placeholder="https://api.maptiler.com/maps/streets-v2/style.json?key=YOUR_KEY">
                            </div>
                            <small class="text-muted">
                                Examples: <a href="https://www.maptiler.com/cloud/" target="_blank">MapTiler Cloud</a>,
                                <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a>,
                                or your own tile server URL
                            </small>
                        </div>
                        <div class="form-group mb-0">
                            <label class="font-weight-bold">MapLibre API Key <small class="text-muted">(if required by your tile provider)</small></label>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-key"></i></span></div>
                                <input type="text" class="form-control" name="MAPLIBRE_API_KEY"
                                    value="{{ old('MAPLIBRE_API_KEY', env('MAPLIBRE_API_KEY')) }}"
                                    placeholder="Your MapLibre-compatible API key...">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="text-right mt-3 mb-5">
                    <button type="submit" class="btn btn-primary btn-lg px-5">
                        <i class="fas fa-save mr-2"></i> Save Settings
                    </button>
                </div>

            </div>

            <div class="col-xl-5">
                <div class="card-box">
                    <div class="card-header-custom" style="background:#f0f7ff;">
                        <i class="fas fa-info-circle text-primary"></i>
                        <h4>How It Works</h4>
                    </div>
                    <ul class="mb-0 pl-3">
                        <li class="mb-2"><strong>Map Enabled</strong> — Master switch to turn the map feature ON/OFF on the checkout page.</li>
                        <li class="mb-2"><strong>Mandatory Map</strong> — When ON, customers must drop a pin on the map before placing an order.</li>
                        <li class="mb-2"><strong>Google Maps</strong> — Premium maps with Places Autocomplete. Requires a Google Cloud API key with Maps JavaScript, Places, and Geocoding APIs enabled.</li>
                        <li class="mb-2"><strong>OpenStreetMap (Leaflet)</strong> — 100% free, no API key needed. Uses OpenStreetMap tiles and Nominatim for search.</li>
                        <li class="mb-2"><strong>MapLibre GL JS</strong> — Modern vector-based maps. Use with MapTiler, Stadia Maps, or your own tile server. Requires a style URL.</li>
                        <li class="mb-2">Only <strong>one provider</strong> is active at a time. Switch anytime — all settings are preserved.</li>
                    </ul>
                </div>
            </div>
        </div>
    </form>

</div>
@endsection

@push('script')
<script>
    // Provider card selection UI
    document.querySelectorAll('.provider-card').forEach(function(card) {
        card.addEventListener('click', function() {
            var radio = this.querySelector('input[type="radio"]');
            radio.checked = true;
            // Update selected state
            document.querySelectorAll('.provider-card').forEach(function(c) { c.classList.remove('selected'); });
            this.classList.add('selected');
            // Show/hide settings
            document.querySelectorAll('.provider-settings').forEach(function(s) { s.classList.remove('active'); });
            var settingsId = 'settings_' + radio.value;
            var settingsEl = document.getElementById(settingsId);
            if (settingsEl) settingsEl.classList.add('active');
        });
    });
</script>
@endpush