@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-3xl font-extrabold text-gray-900 dark:text-white flex items-center gap-3">
        <span class="text-[color:var(--primary-color)]">✏️</span> Edit Profil Institusi
    </h1>

    @if (session('success'))
        <div class="bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 px-4 py-3 rounded-lg flex items-center justify-between animate-fade-in" role="alert">
            <span>{{ session('success') }}</span>
            <button type="button" class="text-green-800 dark:text-green-200 hover:text-green-900 dark:hover:text-green-100" onclick="this.parentElement.remove()">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
        </div>
    @endif

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

        {{-- IDENTITAS --}}
        <section class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-5 border-b pb-3 border-gray-200 dark:border-gray-600">Informasi Dasar</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="nama_perusahaan" class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Nama Institusi <span class="text-red-500">*</span></label>
                    <input type="text" id="nama_perusahaan" name="nama_perusahaan" class="form-input" value="{{ old('nama_perusahaan', $profile->nama_perusahaan) }}" required placeholder="Masukkan nama institusi">
                    @error('nama_perusahaan')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="website" class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Website</label>
                    <input type="url" id="website" name="website" class="form-input" value="{{ old('website', $profile->website) }}" placeholder="e.g., https://www.yourinstitution.com">
                    @error('website')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </section>

        {{-- KONTAK --}}
        <section class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-5 border-b pb-3 border-gray-200 dark:border-gray-600">Informasi Kontak</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="email" class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Email</label>
                    <input type="email" id="email" name="email" class="form-input" value="{{ old('email', $profile->email) }}" placeholder="e.g., info@yourinstitution.com">
                    @error('email')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="telepon" class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Telepon</label>
                    <input type="tel" id="telepon" name="telepon" class="form-input" value="{{ old('telepon', $profile->telepon) }}" placeholder="e.g., +6281234567890">
                    @error('telepon')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </section>

        {{-- REKENING --}}
        <section class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-5 border-b pb-3 border-gray-200 dark:border-gray-600">Informasi Rekening Bank</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="nama_bank" class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Nama Bank</label>
                    <input type="text" id="nama_bank" name="nama_bank" class="form-input" value="{{ old('nama_bank', $profile->nama_bank) }}" placeholder="e.g., Bank Central Asia">
                    @error('nama_bank')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="nomor_rekening" class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Nomor Rekening</label>
                    <input type="text" id="nomor_rekening" name="nomor_rekening" class="form-input" value="{{ old('nomor_rekening', $profile->nomor_rekening) }}" placeholder="e.g., 1234567890">
                    @error('nomor_rekening')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </section>

        {{-- ALAMAT --}}
        <section class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-5 border-b pb-3 border-gray-200 dark:border-gray-600">Informasi Alamat</h2>
            <div>
                <label for="alamat" class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Alamat Lengkap</label>
                <textarea id="alamat" name="alamat" rows="3" class="form-input" placeholder="Jalan Contoh No. 123, Kota Contoh, Provinsi Contoh">{{ old('alamat', $profile->alamat) }}</textarea>
                @error('alamat')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mt-6">
                <label class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Titik Lokasi di Peta</label>
                <input type="hidden" name="alamat_peta" x-ref="lokasiPeta" value="{{ old('alamat_peta', $profile->alamat_peta) }}">
                <div id="map" class="h-[400px] w-full rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600 shadow-md"></div>
                <div class="mt-3 text-sm text-gray-600 dark:text-gray-300 italic" x-text="lokasiLabel || 'Pilih lokasi di peta atau gunakan lokasi saat ini.'"></div>
                <button type="button" @click="getMyLocation()" class="mt-3 inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                    Gunakan Lokasi Saat Ini
                </button>

                @if($profile->alamat_peta)
                    <div class="mt-4 space-y-3">
                        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Lokasi Tersimpan:</h3>
                        <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($profile->alamat_peta) }}"
                           target="_blank"
                           class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:underline text-base font-medium">
                            <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 001 1h3M6 20h12a2 2 0 002-2V8a2 2 0 00-2-2H6a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                            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-36 h-36 rounded border border-gray-300 dark:border-gray-600 shadow-sm p-1 bg-white dark:bg-gray-800">
                        </div>
                    </div>
                @endif
            </div>
        </section>

        {{-- DESKRIPSI --}}
        <section class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-5 border-b pb-3 border-gray-200 dark:border-gray-600">Deskripsi Institusi</h2>
            <div>
                <label for="deskripsi" class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Deskripsi Lengkap</label>
                <textarea id="deskripsi" name="deskripsi" rows="5" class="form-input" placeholder="Berikan deskripsi singkat tentang institusi Anda...">{{ old('deskripsi', $profile->deskripsi) }}</textarea>
                @error('deskripsi')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </section>

        {{-- LOGO --}}
        <section class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-5 border-b pb-3 border-gray-200 dark:border-gray-600">Logo Institusi</h2>
            <div>
                <label for="logo" class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Logo Institusi (opsional)</label>
                <input type="file" id="logo" name="logo" class="block w-full text-sm text-gray-700 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md cursor-pointer
                       file:mr-4 file:py-2 file:px-4
                       file:rounded-md file:border-0
                       file:text-sm file:font-semibold
                       file:bg-[color:var(--primary-color)] file:text-white
                       hover:file:bg-[color:var(--primary-dark-color)]">
                @error('logo')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
                @if (!empty($profile->logo))
                    <div class="mt-4">
                        <label class="block font-medium text-gray-700 dark:text-gray-200 mb-2">Logo Saat Ini:</label>
                        <img src="{{ asset('storage/' . $profile->logo) }}" alt="Logo Institusi" class="w-32 h-32 object-contain rounded-lg border border-gray-300 dark:border-gray-600 p-2 shadow-sm">
                    </div>
                @endif
            </div>
        </section>

        <div class="flex justify-end pt-6 border-t border-gray-200 dark:border-gray-700">
            <button type="submit" class="inline-flex items-center px-8 py-3 bg-[color:var(--primary-color)] text-white font-bold rounded-lg shadow-lg hover:scale-105 hover:bg-[color:var(--primary-dark-color)] transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-[color:var(--primary-color)] focus:ring-offset-2">
                <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path></svg>
                Simpan Perubahan
            </button>
        </div>
    </form>
</div>

{{-- Semua Script dan CSS Leaflet di sini, TANPA INTEGRITY/CROSSORIGIN --}}
<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" />

<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;

    // Helper untuk styling input yang konsisten (bisa dipindahkan ke CSS global)
    const formInputClasses = 'w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-[color:var(--primary-color)] focus:border-[color:var(--primary-color)]';
    document.querySelectorAll('.form-input').forEach(input => {
        input.classList.add(...formInputClasses.split(' '));
    });

    /**
     * Meminta lokasi geografis pengguna dan memperbarui peta.
     */
    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-data]').__x.$refs.lokasiPeta.value = latlng.join(',');
                    document.querySelector('[x-data]').__x.$data.reverseGeocode(latlng);
                },
                error => {
                    console.error("Error getting location: ", error);
                    alert('Tidak dapat mengambil lokasi saat ini. Pastikan layanan lokasi diaktifkan dan berikan izin di browser Anda.');
                },
                { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
            );
        } else {
            alert('Browser Anda tidak mendukung Geolocation.');
        }
    }

    /**
     * Melakukan reverse geocoding untuk mendapatkan alamat yang mudah dibaca dari koordinat.
     * @param {Array} latlng - Array dari [latitude, longitude].
     * @returns {Promise<string>} - Promise yang menyelesaikan dengan nama tampilan alamat.
     */
    async function reverseGeocode(latlng) {
        try {
            const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latlng[0]}&lon=${latlng[1]}`);
            const data = await response.json();
            const display = data.display_name || 'Alamat tidak diketahui.';
            document.querySelector('[x-data]').__x.$data.lokasiLabel = display;
            return display;
        } catch (error) {
            console.error("Error during reverse geocoding: ", error);
            document.querySelector('[x-data]').__x.$data.lokasiLabel = 'Gagal mendapatkan alamat.';
            return 'Gagal mendapatkan alamat.';
        }
    }

    document.addEventListener('alpine:init', () => {
        Alpine.data('alamatForm', () => ({
            lokasiLabel: '',
            init() {
                // Gunakan $nextTick Alpine.js untuk memastikan DOM sepenuhnya di-render
                // sebelum menginisialisasi peta.
                this.$nextTick(() => {
                    const existingLocation = this.$refs.lokasiPeta.value;
                    let initialLat = -6.9034; // Default Latitude (Bandung)
                    let initialLng = 107.5732; // Default Longitude (Bandung)
                    let initialZoom = 12; // Default Zoom

                    if (existingLocation) {
                        const parts = existingLocation.split(',');
                        if (parts.length === 2 && !isNaN(parseFloat(parts[0])) && !isNaN(parseFloat(parts[1]))) {
                            initialLat = parseFloat(parts[0]);
                            initialLng = parseFloat(parts[1]);
                            initialZoom = 15; // Zoom lebih dekat jika lokasi sudah ada
                        }
                    }

                    map = L.map('map', { zoomControl: true, attributionControl: false, inertia: true }).setView([initialLat, initialLng], initialZoom);
                    map.invalidateSize(); // Invalidate size tepat setelah inisialisasi

                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    }).addTo(map);

                    // Tambahkan marker awal jika ada lokasi yang sudah tersimpan
                    if (existingLocation) {
                        const existingLatlng = [initialLat, initialLng];
                        marker = L.marker(existingLatlng).addTo(map);
                        this.reverseGeocode(existingLatlng); // Panggil untuk mendapatkan label dari lokasi yang ada
                    }

                    // 🔍 Search Box
                    L.Control.geocoder({
                        defaultMarkGeocode: false,
                        placeholder: 'Cari lokasi...',
                        errorMessage: 'Alamat tidak ditemukan.',
                        geocodingQueryParams: { countrycodes: 'id' } // Fokus pencarian di Indonesia
                    })
                    .on('markgeocode', (e) => {
                        const latlng = e.geocode.center;
                        map.setView(latlng, 15);
                        if (marker) map.removeLayer(marker);
                        marker = L.marker(latlng).addTo(map);
                        this.$refs.lokasiPeta.value = [latlng.lat, latlng.lng].join(',');
                        this.reverseGeocode([latlng.lat, latlng.lng]);
                    })
                    .addTo(map);

                    // 🖱 Klik di peta
                    map.on('click', (e) => {
                        if (marker) map.removeLayer(marker);
                        marker = L.marker(e.latlng).addTo(map);
                        this.$refs.lokasiPeta.value = [e.latlng.lat, e.latlng.lng].join(',');
                        this.reverseGeocode([e.latlng.lat, e.latlng.lng]);
                    });
                }); // Tutup $nextTick
            },
            // Ekspos fungsi ke lingkup Alpine.js
            getMyLocation: getMyLocation,
            reverseGeocode: reverseGeocode
        }));
    });
</script>

<style>
    /* Tambahkan beberapa animasi dasar dan styling input yang konsisten */
    .animate-fade-in {
        animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Opsional: Variabel warna primer kustom jika belum didefinisikan di CSS/konfigurasi Tailwind Anda */
    :root {
        --primary-color: #4c51bf; /* Contoh: Indigo 700 */
        --primary-dark-color: #3b4097; /* Contoh: Warna Indigo yang lebih gelap */
    }

    /* Tambahkan focus ring yang halus pada input form */
    .form-input:focus {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 3px rgba(76, 81, 191, 0.25); /* Setara dengan focus ring Tailwind */
    }
</style>
@endsection