@extends('admin.layouts.admin')
@section('title', 'إدارة الخريطة')

@section('content')
<div class="max-w-3xl mx-auto">

    {{-- Header --}}
    <div class="flex items-center gap-3 mb-6">
        <div class="p-3 bg-blue-100 rounded-xl text-blue-600 text-2xl">
            <i class="fa-solid fa-map-location-dot"></i>
        </div>
        <div>
            <h2 class="text-2xl font-bold text-gray-800">إدارة الخريطة</h2>
            <p class="text-gray-500 text-sm">أضف رابط خريطة Google Maps لعرضه في الموقع</p>
        </div>
    </div>

    {{-- بطاقة الشرح --}}
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
        <h3 class="font-bold text-blue-800 mb-2 flex items-center gap-2">
            <i class="fa-solid fa-circle-info"></i>
            كيف تحصل على رابط الخريطة؟
        </h3>
        <ol class="text-blue-700 text-sm space-y-1 list-decimal list-inside">
            <li>افتح <strong>Google Maps</strong> وابحث عن موقعك</li>
            <li>اضغط على <strong>مشاركة</strong> (Share)</li>
            <li>اختر <strong>تضمين خريطة</strong> (Embed a map)</li>
            <li>انسخ الرابط الموجود في <code class="bg-blue-100 px-1 rounded">src="..."</code> من الـ iframe فقط</li>
            <li>الصقه في الحقل أدناه</li>
        </ol>
        <div class="mt-3 bg-white rounded-lg p-3 border border-blue-200">
            <p class="text-xs text-gray-500 mb-1">مثال على الرابط الصحيح:</p>
            <code class="text-xs text-gray-700 break-all">https://www.google.com/maps/embed?pb=!1m18!1m12!...</code>
        </div>
    </div>

    {{-- فورم التعديل --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <form action="{{ route('admin.map.update') }}" method="POST">
            @csrf

            {{-- عنوان القسم --}}
            <div class="mb-5">
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    عنوان القسم <span class="text-gray-400 font-normal">(اختياري)</span>
                </label>
                <input
                    type="text"
                    name="title"
                    value="{{ old('title', $map->title) }}"
                    placeholder="مثال: موقعنا على الخريطة"
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none transition"
                >
            </div>

            {{-- رابط الخريطة --}}
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    رابط الخريطة (src من iframe) <span class="text-red-500">*</span>
                </label>
                <textarea
                    name="embed_url"
                    rows="3"
                    placeholder="https://www.google.com/maps/embed?pb=..."
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none transition font-mono text-sm @error('embed_url') border-red-400 @enderror"
                >{{ old('embed_url', $map->embed_url) }}</textarea>
                @error('embed_url')
                    <p class="text-red-500 text-sm mt-1 flex items-center gap-1">
                        <i class="fa-solid fa-circle-exclamation"></i>
                        {{ $message }}
                    </p>
                @enderror
            </div>

            <button type="submit"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition duration-200 flex items-center justify-center gap-2">
                <i class="fa-solid fa-floppy-disk"></i>
                حفظ التغييرات
            </button>
        </form>
    </div>

    {{-- معاينة الخريطة الحالية --}}
    @if($map->embed_url)
    <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
            <i class="fa-solid fa-eye text-blue-500"></i>
            معاينة الخريطة الحالية
        </h3>
        <div class="rounded-lg overflow-hidden border border-gray-200">
            <iframe
                src="{{ $map->embed_url }}"
                width="100%"
                height="350"
                style="border:0;"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
    </div>
    @endif

</div>
@endsection