@extends('layouts.admin')

@section('title', 'Edit Profil Institusi')

@section('content')
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-xl shadow space-y-8" x-data="alamatForm" x-init="init">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">✏️ Edit Profil Institusi</h1>

    @if (session('success'))
        <div class="bg-green-100 text-green-800 px-4 py-2 rounded">{{ session('success') }}</div>
    @endif

    <form method="POST" action="{{ route('admin.profile.update') }}" enctype="multipart/form-data" class="space-y-8">
        @csrf
        @method('PUT')

        {{-- IDENTITAS --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Nama Institusi</label>
                <input type="text" name="nama_perusahaan" class="w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white" value="{{ old('nama_perusahaan', $profile->nama_perusahaan) }}" required>
            </div>
            <div>
                <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Website</label>
                <input type="url" name="website" class="w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white" value="{{ old('website', $profile->website) }}">
            </div>
        </div>

        {{-- KONTAK --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Email</label>
                <input type="email" name="email" class="w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white" value="{{ old('email', $profile->email) }}">
            </div>
            <div>
                <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Telepon</label>
                <input type="text" name="telepon" class="w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white" value="{{ old('telepon', $profile->telepon) }}">
            </div>
        </div>

        {{-- REKENING --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Nama Bank</label>
                <input type="text" name="nama_bank" class="w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white" value="{{ old('nama_bank', $profile->nama_bank) }}">
            </div>
            <div>
                <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Nomor Rekening</label>
                <input type="text" name="nomor_rekening" class="w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white" value="{{ old('nomor_rekening', $profile->nomor_rekening) }}">
            </div>
        </div>

        {{-- ALAMAT --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Alamat</label>
            <textarea name="alamat" rows="3" class="w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white">{{ old('alamat', $profile->alamat) }}</textarea>
        </div>

        {{-- PICKUP MAP --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Titik Lokasi di Peta</label>
            <input type="hidden" name="alamat_peta" x-ref="lokasiPeta">
            <div id="map" class="h-[400px] w-full rounded-lg overflow-hidden border"></div>
            <div class="mt-2 text-sm text-gray-600 dark:text-gray-300 italic" x-text="lokasiLabel"></div>
            <button type="button" onclick="getMyLocation()" class="mt-2 text-sm text-blue-600 hover:underline">📍 Gunakan Lokasi Saat Ini</button>
            @if($profile->alamat_peta)
                <div class="mt-2 space-y-2">
                    <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($profile->alamat_peta) }}"
                       target="_blank"
                       class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline">
                        🌍 Lihat di Google Maps
                    </a>
                    <div>
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&data={{ urlencode('https://www.google.com/maps/search/?api=1&query=' . $profile->alamat_peta) }}"
                             alt="QR Lokasi Google Maps" class="w-40 h-40 rounded border">
                    </div>
                </div>
            @endif
        </div>

        {{-- DESKRIPSI --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Deskripsi</label>
            <textarea name="deskripsi" rows="4" class="w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white">{{ old('deskripsi', $profile->deskripsi) }}</textarea>
        </div>

        {{-- LOGO --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-gray-200 mb-1">Logo Institusi (opsional)</label>
            <input type="file" name="logo" class="block w-full text-sm text-gray-700 dark:text-white bg-white dark:bg-gray-700 border rounded-md file:px-4 file:py-2 file:bg-[color:var(--primary-color)] file:text-white">
            @if (!empty($profile->logo))
                <div class="mt-4">
                    <img src="{{ asset('storage/' . $profile->logo) }}" alt="Logo" class="w-24 h-24 object-contain rounded">
                </div>
            @endif
        </div>

        <div class="text-right">
            <button type="submit" class="px-6 py-2 bg-[color:var(--primary-color)] text-white rounded-md shadow hover:scale-105 transition">💾 Simpan Perubahan</button>
        </div>
    </form>
</div>

<!-- Leaflet Core -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<!-- Leaflet Geocoder -->
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />

<script>
    let map, marker;

    function getMyLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                const latlng = [position.coords.latitude, position.coords.longitude];
                map.setView(latlng, 15);
                if (marker) map.removeLayer(marker);
                marker = L.marker(latlng).addTo(map);
                document.querySelector('[x-ref=lokasiPeta]').value = latlng.join(',');
                reverseGeocode(latlng);
            });
        } else {
            alert('Browser tidak mendukung geolocation.');
        }
    }

    function reverseGeocode(latlng) {
        return fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latlng[0]}&lon=${latlng[1]}`)
            .then(res => res.json())
            .then(data => {
                const display = data.display_name || '';
                document.querySelector('[x-data]').__x.$data.lokasiLabel = display;
                return display;
            });
    }

    document.addEventListener('alpine:init', () => {
        Alpine.data('alamatForm', () => ({
            lokasiLabel: '',
            init() {
                map = L.map('map', { zoomControl: true, attributionControl: false, inertia: true }).setView([-1.5, 117], 12);
                setTimeout(() => { map.invalidateSize(); }, 500);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

                // 🔍 Search Box
                L.Control.geocoder({
                    defaultMarkGeocode: false,
                    placeholder: 'Cari lokasi...',
                    errorMessage: 'Alamat tidak ditemukan.',
                })
                .on('markgeocode', function(e) {
                    const latlng = e.geocode.center;
                    map.setView(latlng, 15);
                    if (marker) map.removeLayer(marker);
                    marker = L.marker(latlng).addTo(map);
                    document.querySelector('[x-ref=lokasiPeta]').value = [latlng.lat, latlng.lng].join(',');
                    reverseGeocode([latlng.lat, latlng.lng]);
                })
                .addTo(map);

                // 🖱 Klik di peta
                map.on('click', function(e) {
                    if (marker) map.removeLayer(marker);
                    marker = L.marker(e.latlng).addTo(map);
                    document.querySelector('[x-ref=lokasiPeta]').value = [e.latlng.lat, e.latlng.lng].join(',');
                    reverseGeocode([e.latlng.lat, e.latlng.lng]);
                });
            }
        }));
    });
</script>
@endsection