@extends('layouts.superadmin')

@section('title', 'Kelola Masjid')

@section('header_title')
    <h1 class="text-2xl font-bold text-primary">Daftar Masjid Terdaftar</h1>
@endsection

@section('header_actions')
    <select class="bg-white border border-gray-300 text-sm rounded-lg focus:ring-primary focus:border-primary block px-3 py-1.5 w-40">
        <option>-- Pilih Masjid --</option>
    </select>
@endsection

@push('styles')
{{-- Leaflet.js CSS --}}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<style>
    /* ===== Peta Leaflet di Modal ===== */
    .map-container {
        height: 280px;
        width: 100%;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        z-index: 1;
    }
    /* Pastikan z-index leaflet control tidak tertimpa modal */
    .leaflet-top, .leaflet-bottom { z-index: 9999 !important; }

    /* ===== Koordinat Readonly Badge ===== */
    .coord-field-wrap { position: relative; }
    .coord-field-wrap .coord-icon {
        position: absolute; left: 10px; top: 50%;
        transform: translateY(-50%);
        color: #6b7280; font-size: 14px; pointer-events: none;
    }
    .coord-input {
        padding-left: 30px !important;
        background-color: #f9fafb !important;
        cursor: not-allowed;
        font-size: 12px !important;
        font-family: 'Courier New', monospace !important;
    }
    .map-hint {
        font-size: 11px;
        color: #6b7280;
        margin-top: 6px;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .coord-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #166534;
        border-radius: 6px;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
    }
    .no-coord-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        color: #9ca3af;
        border-radius: 6px;
        padding: 2px 8px;
        font-size: 11px;
    }

    /* ===== Geocoding Search Bar ===== */
    .geocode-wrap { position: relative; }
    .geocode-input {
        width: 100%;
        padding: 8px 100px 8px 34px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 13px;
        font-family: 'Inter', sans-serif;
        color: #111827;
        background: white;
        outline: none;
        transition: border-color .15s;
    }
    .geocode-input:focus { border-color: #1a6b3c; box-shadow: 0 0 0 3px rgba(26,107,60,.1); }
    .geocode-icon {
        position: absolute; left: 10px; top: 50%;
        transform: translateY(-50%);
        color: #9ca3af; font-size: 14px; pointer-events: none;
    }
    .geocode-btn {
        position: absolute; right: 4px; top: 50%;
        transform: translateY(-50%);
        background: #1a6b3c;
        color: white;
        border: none;
        border-radius: 6px;
        padding: 5px 12px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        display: flex; align-items: center; gap: 5px;
        transition: background .15s;
        white-space: nowrap;
    }
    .geocode-btn:hover { background: #0c331f; }
    .geocode-btn:disabled { background: #9ca3af; cursor: not-allowed; }
    .geocode-results {
        position: absolute;
        top: calc(100% + 4px);
        left: 0; right: 0;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        z-index: 10000;
        max-height: 200px;
        overflow-y: auto;
        display: none;
    }
    .geocode-results.show { display: block; }
    .geocode-result-item {
        padding: 9px 14px;
        font-size: 13px;
        color: #374151;
        cursor: pointer;
        border-bottom: 1px solid #f3f4f6;
        display: flex; align-items: flex-start; gap: 8px;
        transition: background .1s;
    }
    .geocode-result-item:last-child { border-bottom: none; }
    .geocode-result-item:hover { background: #f0fdf4; color: #1a6b3c; }
    .geocode-result-item i { flex-shrink: 0; margin-top: 2px; color: #1a6b3c; }
    .geocode-result-name { font-weight: 600; font-size: 12.5px; }
    .geocode-result-detail { font-size: 11px; color: #9ca3af; margin-top: 1px; }
    .geocode-no-result { padding: 12px 14px; font-size: 13px; color: #9ca3af; text-align: center; }
    .geocode-spinner { animation: spin .8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
</style>
@endpush

@section('content')

    <!-- Tabs -->
    <div class="border-b border-gray-200 mb-6">
        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500">
            <li class="me-2">
                <a href="{{ url('/superadmin/kelola-masjid?tab=terdaftar') }}" class="inline-flex items-center justify-center p-4 border-b-2 rounded-t-lg group {{ $tab == 'terdaftar' ? 'text-primary border-primary active' : 'border-transparent hover:text-gray-600 hover:border-gray-300' }}">
                    <i class="bi bi-building me-2"></i> Masjid Terdaftar
                </a>
            </li>
            <li class="me-2">
                <a href="{{ url('/superadmin/kelola-masjid?tab=pengajuan') }}" class="inline-flex items-center justify-center p-4 border-b-2 rounded-t-lg group {{ $tab == 'pengajuan' ? 'text-primary border-primary active' : 'border-transparent hover:text-gray-600 hover:border-gray-300' }}">
                    <i class="bi bi-card-checklist me-2"></i> Pengajuan Baru
                    @php $pendingCount = \App\Models\PengajuanMasjid::where('status_pengajuan','pending')->count(); @endphp
                    @if($pendingCount > 0)
                        <span class="ms-2 bg-red-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">{{ $pendingCount }}</span>
                    @endif
                </a>
            </li>
        </ul>
    </div>

    @if($tab == 'terdaftar')
    <!-- Action Bar -->
    <div class="mb-6 flex flex-col md:flex-row justify-between items-center gap-4">
        <form method="GET" action="{{ url('/superadmin/kelola-masjid') }}" class="w-full md:w-80 relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <i class="bi bi-search text-gray-400"></i>
            </div>
            <input type="text" name="search" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary block w-full pl-10 p-2.5 shadow-sm" placeholder="Cari masjid..." value="{{ request('search') }}">
            <button type="submit" class="hidden"></button>
        </form>

        <button id="btnTambahMasjid" onclick="bukaModalTambah()" class="w-full md:w-auto bg-primary hover:bg-[#0c331f] text-white font-semibold py-2 px-5 rounded-lg transition-colors shadow-md flex items-center justify-center gap-2 text-sm">
            <i class="bi bi-plus-lg"></i> Tambah Masjid
        </button>
    </div>

    <!-- Table -->
    <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50 text-gray-600 text-xs font-bold uppercase tracking-wider border-b border-gray-200">
                        <th class="px-6 py-4 font-bold">No</th>
                        <th class="px-6 py-4 font-bold">Nama Masjid</th>
                        <th class="px-6 py-4 font-bold">Alamat</th>
                        <th class="px-6 py-4 font-bold">Admin Masjid</th>
                        <th class="px-6 py-4 font-bold">Tahun Aktif</th>
                        <th class="px-6 py-4 font-bold">Koordinat GPS</th>
                        <th class="px-6 py-4 font-bold">Status</th>
                        <th class="px-6 py-4 font-bold text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="text-sm text-gray-700 divide-y divide-gray-100 bg-white">
                    @forelse($masjid as $index => $item)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">{{ $masjid->firstItem() + $index }}</td>
                            <td class="px-6 py-4 font-semibold text-primary">{{ $item->nama_masjid }}</td>
                            <td class="px-6 py-4 text-gray-500">
                                <span class="truncate block w-48">{{ $item->alamat_masjid ?? '-' }}</span>
                            </td>
                            <td class="px-6 py-4">{{ $item->nama_admin ?? 'Admin' }}</td>
                            <td class="px-6 py-4">{{ $item->created_at ? $item->created_at->format('Y') : date('Y') }}</td>
                            <td class="px-6 py-4">
                                @if($item->latitude && $item->longitude)
                                    <span class="coord-badge">
                                        <i class="bi bi-geo-alt-fill"></i>
                                        {{ number_format($item->latitude, 5) }}, {{ number_format($item->longitude, 5) }}
                                    </span>
                                @else
                                    <span class="no-coord-badge">
                                        <i class="bi bi-geo-alt"></i> Belum diatur
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="bg-emerald-100 text-emerald-700 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Aktif</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                <button
                                    onclick="bukaModalEdit({{ $item->id_masjid }}, '{{ addslashes($item->nama_masjid) }}', '{{ addslashes($item->alamat_masjid) }}', '{{ $item->latitude }}', '{{ $item->longitude }}')"
                                    class="action-icon-btn edit"
                                    title="Edit koordinat masjid">
                                    <i class="bi bi-geo-alt-fill"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                                <i class="bi bi-building-x text-4xl mb-3 block text-gray-300"></i>
                                Belum ada masjid terdaftar.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination footer -->
        <div class="px-6 py-4 bg-gray-50/50 border-t border-gray-200 flex items-center justify-between">
            <span class="text-xs text-gray-500">Menampilkan {{ $masjid->firstItem() ?? 0 }}-{{ $masjid->lastItem() ?? 0 }} dari {{ $masjid->total() }} masjid</span>
            <div class="flex gap-1">
                {{ $masjid->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>

    @else
    
    <!-- Filter Card -->
    <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-200 mb-6 flex flex-col md:flex-row justify-between gap-4">
        <form method="GET" action="{{ url('/superadmin/kelola-masjid') }}" class="w-full flex flex-col md:flex-row justify-between gap-4">
            <input type="hidden" name="tab" value="pengajuan">
            <div class="w-full md:w-64">
                <label class="block text-[11px] font-bold text-gray-500 uppercase tracking-wider mb-2">Status Pengajuan</label>
                <select name="status" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5" onchange="this.form.submit()">
                    <option value="Semua Status" {{ request('status') == 'Semua Status' ? 'selected' : '' }}>Semua Status</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Disetujui</option>
                    <option value="ditolak" {{ request('status') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                </select>
            </div>
            
            <div class="w-full md:w-80 flex items-end">
                <div class="w-full relative">
                    <label class="block text-[11px] font-bold text-gray-500 uppercase tracking-wider mb-2">Cari</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="bi bi-search text-gray-400"></i>
                        </div>
                        <input type="text" name="search" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary block w-full pl-10 p-2.5" placeholder="Cari Nama Masjid..." value="{{ request('search') }}">
                        <button type="submit" class="hidden"></button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Table Pengajuan -->
    <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50 text-gray-600 text-xs font-bold uppercase tracking-wider border-b border-gray-200">
                        <th class="px-6 py-4 font-bold">No</th>
                        <th class="px-6 py-4 font-bold">Nama Masjid</th>
                        <th class="px-6 py-4 font-bold">Alamat</th>
                        <th class="px-6 py-4 font-bold">Nama Admin</th>
                        <th class="px-6 py-4 font-bold">No WA</th>
                        <th class="px-6 py-4 font-bold">Tanggal</th>
                        <th class="px-6 py-4 font-bold">Status</th>
                        <th class="px-6 py-4 font-bold text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="text-sm text-gray-700 divide-y divide-gray-100 bg-white">
                    @forelse($pengajuan as $index => $item)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">{{ $pengajuan->firstItem() + $index }}</td>
                            <td class="px-6 py-4 font-semibold text-gray-900">{{ $item->nama_masjid }}</td>
                            <td class="px-6 py-4 text-gray-500">
                                <span class="truncate block w-40">{{ $item->alamat_masjid }}</span>
                            </td>
                            <td class="px-6 py-4">{{ $item->nama_admin_masjid }}</td>
                            <td class="px-6 py-4 font-medium">{{ $item->no_wa_admin }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-gray-500">
                                {{ \Carbon\Carbon::parse($item->tanggal_pengajuan)->format('d M Y') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($item->status_pengajuan == 'pending')
                                    <span class="bg-amber-100 text-amber-700 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Pending</span>
                                @elseif($item->status_pengajuan == 'approved' || $item->status_pengajuan == 'disetujui')
                                    <span class="bg-emerald-100 text-emerald-700 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Disetujui</span>
                                @else
                                    <span class="bg-red-100 text-red-700 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Ditolak</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                <div class="flex items-center justify-center gap-2">
                                    <button class="bg-[#e4e7ed] hover:bg-gray-300 text-gray-700 px-3 py-1.5 rounded-md text-xs font-semibold flex items-center gap-1.5 transition-colors">
                                        <i class="bi bi-eye"></i> Lihat
                                    </button>
                                    @if($item->status_pengajuan == 'pending')
                                        <form action="{{ url('/superadmin/masjid/approve/' . $item->id_pengajuan) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="bg-primary hover:bg-[#0c331f] text-white px-3 py-1.5 rounded-md text-xs font-semibold flex items-center gap-1.5 transition-colors" onclick="return confirm('Approve pengajuan ini?')">
                                                <i class="bi bi-check-circle"></i> Approve
                                            </button>
                                        </form>
                                        <form action="{{ url('/superadmin/masjid/reject/' . $item->id_pengajuan) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1.5 rounded-md text-xs font-semibold flex items-center gap-1.5 transition-colors" onclick="return confirm('Tolak pengajuan ini?')">
                                                <i class="bi bi-x-circle"></i> Reject
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                                <i class="bi bi-folder2-open text-4xl mb-3 block text-gray-300"></i>
                                Belum ada pengajuan masjid.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination footer -->
        <div class="px-6 py-4 bg-gray-50/50 border-t border-gray-200 flex items-center justify-between">
            <span class="text-xs text-gray-500">Menampilkan {{ $pengajuan->firstItem() ?? 0 }}-{{ $pengajuan->lastItem() ?? 0 }} dari {{ $pengajuan->total() }} data</span>
            <div class="flex gap-1">
                {{ $pengajuan->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
    @endif
    
    <style>
        .pagination { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
        .page-item .page-link { border-radius: 0.375rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; color: #4b5563; background: white; border: 1px solid #e5e7eb; }
        .page-item.active .page-link { background: #154b32; color: white; border-color: #154b32; }
        
        /* ===== Modal WA ===== */
        #modalWA {
            display: none;
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.55);
            align-items: center; justify-content: center;
        }
        #modalWA.show { display: flex; }
        #modalWA .modal-box {
            background: white;
            border-radius: 20px;
            padding: 32px;
            width: 100%; max-width: 480px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: popIn .25s ease;
        }
        @keyframes popIn {
            from { transform: scale(.9); opacity: 0; }
            to   { transform: scale(1);  opacity: 1; }
        }
        .wa-preview {
            background: #dcfce7;
            border-radius: 12px;
            padding: 14px 16px;
            font-size: 13px;
            color: #166534;
            white-space: pre-wrap;
            line-height: 1.6;
            max-height: 180px;
            overflow-y: auto;
            border: 1px solid #bbf7d0;
            margin: 16px 0;
        }
    </style>

    {{-- ===== MODAL NOTIFIKASI WHATSAPP ===== --}}
    @if(session('wa_notif'))
    @php $wa = session('wa_notif'); @endphp
    <div id="modalWA" class="show">
        <div class="modal-box">
            {{-- Header --}}
            <div class="flex items-center gap-3 mb-2">
                <div class="w-11 h-11 rounded-full flex items-center justify-center"
                     style="background: {{ $wa['status'] === 'disetujui' ? '#dcfce7' : '#fee2e2' }}">
                    <span style="font-size: 22px;">{{ $wa['status'] === 'disetujui' ? '✅' : '❌' }}</span>
                </div>
                <div>
                    <h3 class="font-bold text-gray-900 text-base">Kirim Notifikasi WhatsApp</h3>
                    <p class="text-xs text-gray-500">
                        Ke: <strong>{{ $wa['nama'] }}</strong>
                        ({{ $wa['no_wa'] }})
                    </p>
                </div>
            </div>

            <p class="text-xs text-gray-500 mb-1">Preview pesan yang akan dikirim:</p>
            <div class="wa-preview">{{ $wa['pesan'] }}</div>

            <p class="text-xs text-gray-400 mb-4">
                <i class="bi bi-info-circle"></i>
                WhatsApp Web akan terbuka dengan pesan yang sudah terisi. Klik <strong>Kirim</strong> di WhatsApp untuk mengirim.
            </p>

            {{-- Tombol --}}
            <div class="flex gap-3">
                <a href="{{ $wa['wa_link'] }}" target="_blank"
                   class="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-white font-bold text-sm transition-all"
                   style="background: #25D366;"
                   onclick="document.getElementById('modalWA').classList.remove('show')">
                    <svg viewBox="0 0 24 24" width="18" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                   Buka WhatsApp & Kirim
                </a>
                <button onclick="document.getElementById('modalWA').classList.remove('show')"
                        class="px-5 py-2.5 rounded-xl border border-gray-300 text-gray-600 font-semibold text-sm hover:bg-gray-50 transition-all">
                    Lewati
                </button>
            </div>
        </div>
    </div>
    @endif

@endsection

@section('modals')

    {{-- ============================================================ --}}
    {{-- MODAL TAMBAH MASJID (dengan Peta Leaflet.js)                 --}}
    {{-- ============================================================ --}}
    <div id="modalTambahMasjid" class="fixed inset-0 bg-black bg-opacity-50 z-[999] hidden items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl overflow-hidden flex flex-col" style="max-height: 92vh;">
            <div class="p-5 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                <h3 class="text-lg font-bold text-gray-900">Tambah Masjid Baru</h3>
                <button type="button" onclick="tutupModalTambah()" class="text-gray-400 hover:text-red-500 text-xl leading-none">&times;</button>
            </div>
            
            <form id="formTambahMasjid" action="{{ url('/superadmin/masjid/store') }}" method="POST" class="overflow-y-auto flex-1">
                @csrf
                <div class="p-5 space-y-4">
                    @if($errors->any())
                        <div class="bg-red-50 border border-red-200 text-red-600 rounded-lg p-3 text-sm">
                            <ul class="list-disc list-inside">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                bukaModalTambah();
                            });
                        </script>
                    @endif

                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Nama Masjid <span class="text-red-500">*</span></label>
                        <input type="text" name="nama_masjid" id="tambah_nama_masjid" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" required value="{{ old('nama_masjid') }}">
                    </div>
                    
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Alamat Lengkap <span class="text-red-500">*</span></label>
                        <textarea name="alamat_masjid" id="tambah_alamat_masjid" rows="2" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" required>{{ old('alamat_masjid') }}</textarea>
                        <p class="text-[11px] text-gray-400 mt-1 flex items-center gap-1">
                            <i class="bi bi-lightbulb"></i>
                            Setelah mengisi alamat, klik <strong>"Cari di Peta"</strong> untuk menemukan koordinat secara otomatis.
                        </p>
                    </div>

                    {{-- ===== SEKSI KOORDINAT GPS ===== --}}
                    <div class="border border-green-100 bg-green-50/50 rounded-xl p-4 space-y-3">
                        <p class="text-[11px] font-bold text-primary uppercase tracking-wider flex items-center gap-1.5">
                            <i class="bi bi-geo-alt-fill"></i> Titik Koordinat GPS (Opsional)
                        </p>

                        {{-- Geocoding Search Bar --}}
                        <div class="geocode-wrap" id="geocodeWrapTambah">
                            <i class="bi bi-search geocode-icon"></i>
                            <input type="text" id="tambah_geocode_input"
                                class="geocode-input"
                                placeholder="Ketik nama / alamat masjid lalu klik Cari di Peta..."
                                autocomplete="off">
                            <button type="button" id="tambah_geocode_btn"
                                onclick="cariLokasiGeocoding('tambah')"
                                class="geocode-btn">
                                <i class="bi bi-search"></i> Cari di Peta
                            </button>
                            <div class="geocode-results" id="tambah_geocode_results"></div>
                        </div>

                        {{-- Grid Lat & Lng --}}
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-semibold text-gray-700 mb-1">Latitude</label>
                                <div class="coord-field-wrap">
                                    <i class="bi bi-arrows-vertical coord-icon"></i>
                                    <input type="text" name="latitude" id="tambah_latitude"
                                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none coord-input"
                                        placeholder="Terisi otomatis..." readonly value="{{ old('latitude') }}">
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-700 mb-1">Longitude</label>
                                <div class="coord-field-wrap">
                                    <i class="bi bi-arrows-expand coord-icon"></i>
                                    <input type="text" name="longitude" id="tambah_longitude"
                                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none coord-input"
                                        placeholder="Terisi otomatis..." readonly value="{{ old('longitude') }}">
                                </div>
                            </div>
                        </div>

                        {{-- Peta Leaflet --}}
                        <p class="map-hint"><i class="bi bi-mouse2"></i> Atau klik langsung pada peta untuk menentukan titik secara manual:</p>
                        <div id="mapTambah" class="map-container"></div>
                    </div>

                    <div class="border-t border-gray-100 pt-4 mt-2">
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-3">Akun Admin Masjid</p>
                        
                        <div class="space-y-3">
                            <div>
                                <label class="block text-xs font-semibold text-gray-700 mb-1">Nama Lengkap Admin <span class="text-red-500">*</span></label>
                                <input type="text" name="nama_admin" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" required value="{{ old('nama_admin') }}">
                            </div>

                            <div>
                                <label class="block text-xs font-semibold text-gray-700 mb-1">Username <span class="text-red-500">*</span></label>
                                <input type="text" name="username" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" placeholder="Contoh: adminmasjid01" required value="{{ old('username') }}">
                                <p class="text-[10px] text-gray-400 mt-1">Bebas, unik, dan mudah diingat. Tanpa spasi.</p>
                            </div>

                            <div>
                                <label class="block text-xs font-semibold text-gray-700 mb-1">Email <span class="text-red-500">*</span></label>
                                <input type="email" name="email" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" placeholder="admin@masjid.id" required value="{{ old('email') }}">
                                <p class="text-[10px] text-gray-400 mt-1">Digunakan untuk login ke sistem.</p>
                            </div>

                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-xs font-semibold text-gray-700 mb-1">Password <span class="text-red-500">*</span></label>
                                    <div class="relative">
                                        <input type="password" name="password" id="tambah_password" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none pr-9" required placeholder="Min. 6 karakter">
                                        <button type="button" onclick="toggleTambahPass('tambah_password', 'icon_tambah_pass')" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                            <i class="bi bi-eye-slash text-sm" id="icon_tambah_pass"></i>
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-gray-700 mb-1">Konfirmasi Password <span class="text-red-500">*</span></label>
                                    <div class="relative">
                                        <input type="password" name="password_confirmation" id="tambah_password_confirmation" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none pr-9" required placeholder="Ulangi password">
                                        <button type="button" onclick="toggleTambahPass('tambah_password_confirmation', 'icon_tambah_confirm')" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                            <i class="bi bi-eye-slash text-sm" id="icon_tambah_confirm"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="p-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-2 flex-shrink-0">
                    <button type="button" onclick="tutupModalTambah()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">Batal</button>
                    <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-primary hover:bg-[#0c331f] rounded-lg flex items-center gap-2">
                        <i class="bi bi-check-lg"></i> Simpan Masjid
                    </button>
                </div>
            </form>
        </div>
    </div>


    {{-- ============================================================ --}}
    {{-- MODAL EDIT KOORDINAT MASJID (dengan Peta Leaflet.js)         --}}
    {{-- ============================================================ --}}
    <div id="modalEditMasjid" class="fixed inset-0 bg-black bg-opacity-50 z-[999] hidden items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl overflow-hidden flex flex-col" style="max-height: 92vh;">
            <div class="p-5 border-b border-gray-200 flex items-center justify-between flex-shrink-0">
                <div>
                    <h3 class="text-lg font-bold text-gray-900">Edit Data Masjid</h3>
                    <p class="text-xs text-gray-500 mt-0.5" id="editModalSubtitle">Memperbarui informasi dan koordinat GPS</p>
                </div>
                <button type="button" onclick="tutupModalEdit()" class="text-gray-400 hover:text-red-500 text-xl leading-none">&times;</button>
            </div>
            
            <form id="formEditMasjid" method="POST" class="overflow-y-auto flex-1">
                @csrf
                <div class="p-5 space-y-4">

                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Nama Masjid <span class="text-red-500">*</span></label>
                        <input type="text" name="nama_masjid" id="edit_nama_masjid" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" required>
                    </div>
                    
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Alamat Lengkap <span class="text-red-500">*</span></label>
                        <textarea name="alamat_masjid" id="edit_alamat_masjid" rows="2" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none" required></textarea>
                        <p class="text-[11px] text-gray-400 mt-1 flex items-center gap-1">
                            <i class="bi bi-lightbulb"></i>
                            Setelah mengisi alamat, klik <strong>"Cari di Peta"</strong> untuk menemukan koordinat secara otomatis.
                        </p>
                    </div>

                    {{-- ===== SEKSI KOORDINAT GPS ===== --}}
                    <div class="border border-green-100 bg-green-50/50 rounded-xl p-4 space-y-3">
                        <p class="text-[11px] font-bold text-primary uppercase tracking-wider flex items-center gap-1.5">
                            <i class="bi bi-geo-alt-fill"></i> Titik Koordinat GPS
                        </p>

                        {{-- Geocoding Search Bar --}}
                        <div class="geocode-wrap" id="geocodeWrapEdit">
                            <i class="bi bi-search geocode-icon"></i>
                            <input type="text" id="edit_geocode_input"
                                class="geocode-input"
                                placeholder="Ketik nama / alamat masjid lalu klik Cari di Peta..."
                                autocomplete="off">
                            <button type="button" id="edit_geocode_btn"
                                onclick="cariLokasiGeocoding('edit')"
                                class="geocode-btn">
                                <i class="bi bi-search"></i> Cari di Peta
                            </button>
                            <div class="geocode-results" id="edit_geocode_results"></div>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-semibold text-gray-700 mb-1">Latitude</label>
                                <div class="coord-field-wrap">
                                    <i class="bi bi-arrows-vertical coord-icon"></i>
                                    <input type="text" name="latitude" id="edit_latitude"
                                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none coord-input"
                                        placeholder="Terisi otomatis..." readonly>
                                </div>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-gray-700 mb-1">Longitude</label>
                                <div class="coord-field-wrap">
                                    <i class="bi bi-arrows-expand coord-icon"></i>
                                    <input type="text" name="longitude" id="edit_longitude"
                                        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none coord-input"
                                        placeholder="Terisi otomatis..." readonly>
                                </div>
                            </div>
                        </div>

                        {{-- Tombol Reset --}}
                        <div class="flex items-center gap-2">
                            <p class="map-hint flex-1"><i class="bi bi-mouse2"></i> Atau klik langsung pada peta untuk posisi manual:</p>
                            <button type="button" onclick="resetKoordinatEdit()" class="text-xs text-red-500 hover:text-red-700 flex items-center gap-1 flex-shrink-0">
                                <i class="bi bi-trash3"></i> Hapus Koordinat
                            </button>
                        </div>
                        <div id="mapEdit" class="map-container"></div>
                    </div>
                </div>
                
                <div class="p-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-2 flex-shrink-0">
                    <button type="button" onclick="tutupModalEdit()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">Batal</button>
                    <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-primary hover:bg-[#0c331f] rounded-lg flex items-center gap-2">
                        <i class="bi bi-check-lg"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('scripts')
{{-- Leaflet.js Library --}}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV/XN/WLcE=" crossorigin=""></script>

<script>
// ========================================================
// KONFIGURASI AWAL PETA
// ========================================================
// Default center: Indonesia (jika koordinat tidak diketahui)
const DEFAULT_LAT  = -2.5489;
const DEFAULT_LNG  = 118.0149;
const DEFAULT_ZOOM = 5;
const DETAIL_ZOOM  = 16;

// Icon marker kustom berwarna hijau (tema masjid)
const masjidIcon = L.divIcon({
    className: '',
    html: `<div style="
        width: 32px; height: 32px;
        background: #1a6b3c;
        border: 3px solid white;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    "></div>`,
    iconSize: [32, 32],
    iconAnchor: [16, 32],
    popupAnchor: [0, -36],
});

// ========================================================
// PETA MODAL TAMBAH
// ========================================================
let mapTambah     = null;
let markerTambah  = null;

function initMapTambah() {
    if (mapTambah) {
        mapTambah.invalidateSize();
        return;
    }

    mapTambah = L.map('mapTambah').setView([DEFAULT_LAT, DEFAULT_LNG], DEFAULT_ZOOM);

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

    // Jika ada nilai lama (validasi gagal), tampilkan marker
    const oldLat = document.getElementById('tambah_latitude').value;
    const oldLng = document.getElementById('tambah_longitude').value;
    if (oldLat && oldLng) {
        pasangMarkerTambah(parseFloat(oldLat), parseFloat(oldLng));
        mapTambah.setView([parseFloat(oldLat), parseFloat(oldLng)], DETAIL_ZOOM);
    }

    // Event: klik pada peta
    mapTambah.on('click', function(e) {
        pasangMarkerTambah(e.latlng.lat, e.latlng.lng);
    });
}

function pasangMarkerTambah(lat, lng) {
    if (markerTambah) {
        markerTambah.setLatLng([lat, lng]);
    } else {
        markerTambah = L.marker([lat, lng], { icon: masjidIcon, draggable: true }).addTo(mapTambah);

        // Event: marker di-drag
        markerTambah.on('dragend', function(e) {
            const pos = e.target.getLatLng();
            isiKoordinat('tambah', pos.lat, pos.lng);
        });
    }
    isiKoordinat('tambah', lat, lng);
    markerTambah.bindPopup('<b>Lokasi Masjid</b><br>' + lat.toFixed(8) + ', ' + lng.toFixed(8)).openPopup();
}

// ========================================================
// PETA MODAL EDIT
// ========================================================
let mapEdit     = null;
let markerEdit  = null;

function initMapEdit(lat, lng) {
    const hasCoord = lat && lng && lat !== '' && lng !== '';
    const centerLat = hasCoord ? parseFloat(lat) : DEFAULT_LAT;
    const centerLng = hasCoord ? parseFloat(lng) : DEFAULT_LNG;
    const zoom      = hasCoord ? DETAIL_ZOOM : DEFAULT_ZOOM;

    if (mapEdit) {
        mapEdit.invalidateSize();
        mapEdit.setView([centerLat, centerLng], zoom);

        // Reset marker lama
        if (markerEdit) {
            mapEdit.removeLayer(markerEdit);
            markerEdit = null;
        }

        if (hasCoord) {
            pasangMarkerEdit(centerLat, centerLng);
        }
        return;
    }

    mapEdit = L.map('mapEdit').setView([centerLat, centerLng], zoom);

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

    if (hasCoord) {
        pasangMarkerEdit(centerLat, centerLng);
    }

    // Event: klik pada peta
    mapEdit.on('click', function(e) {
        pasangMarkerEdit(e.latlng.lat, e.latlng.lng);
    });
}

function pasangMarkerEdit(lat, lng) {
    if (markerEdit) {
        markerEdit.setLatLng([lat, lng]);
    } else {
        markerEdit = L.marker([lat, lng], { icon: masjidIcon, draggable: true }).addTo(mapEdit);

        // Event: marker di-drag
        markerEdit.on('dragend', function(e) {
            const pos = e.target.getLatLng();
            isiKoordinat('edit', pos.lat, pos.lng);
        });
    }
    isiKoordinat('edit', lat, lng);
    markerEdit.bindPopup('<b>Lokasi Masjid</b><br>' + lat.toFixed(8) + ', ' + lng.toFixed(8)).openPopup();
}

function resetKoordinatEdit() {
    document.getElementById('edit_latitude').value  = '';
    document.getElementById('edit_longitude').value = '';
    if (markerEdit && mapEdit) {
        mapEdit.removeLayer(markerEdit);
        markerEdit = null;
    }
}

// ========================================================
// HELPER: Isi field koordinat
// ========================================================
function isiKoordinat(prefix, lat, lng) {
    document.getElementById(prefix + '_latitude').value  = lat.toFixed(8);
    document.getElementById(prefix + '_longitude').value = lng.toFixed(8);
}

// ========================================================
// BUKA / TUTUP MODAL TAMBAH
// ========================================================
function bukaModalTambah() {
    const modal = document.getElementById('modalTambahMasjid');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    // Inisialisasi peta setelah modal visible (butuh delay kecil)
    setTimeout(initMapTambah, 150);
}

function tutupModalTambah() {
    const modal = document.getElementById('modalTambahMasjid');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

// ========================================================
// BUKA / TUTUP MODAL EDIT
// ========================================================
function bukaModalEdit(id, nama, alamat, lat, lng) {
    // Isi form dengan data existing
    document.getElementById('edit_nama_masjid').value    = nama;
    document.getElementById('edit_alamat_masjid').value  = alamat;
    document.getElementById('edit_latitude').value       = lat || '';
    document.getElementById('edit_longitude').value      = lng || '';
    document.getElementById('editModalSubtitle').textContent = 'Mengedit: ' + nama;

    // Set action form ke URL update yang benar
    document.getElementById('formEditMasjid').action = '/superadmin/masjid/update/' + id;

    const modal = document.getElementById('modalEditMasjid');
    modal.classList.remove('hidden');
    modal.classList.add('flex');

    // Inisialisasi/refresh peta
    setTimeout(function() {
        initMapEdit(lat, lng);
    }, 150);
}

function tutupModalEdit() {
    const modal = document.getElementById('modalEditMasjid');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}

// ========================================================
// Tutup modal dengan klik luar area
// ========================================================
document.getElementById('modalTambahMasjid').addEventListener('click', function(e) {
    if (e.target === this) tutupModalTambah();
});
document.getElementById('modalEditMasjid').addEventListener('click', function(e) {
    if (e.target === this) tutupModalEdit();
});

// ========================================================
// GEOCODING — Nominatim API (OpenStreetMap, gratis)
// ========================================================

/**
 * Fungsi utama geocoding.
 * @param {string} prefix - 'tambah' atau 'edit'
 */
async function cariLokasiGeocoding(prefix) {
    const input   = document.getElementById(prefix + '_geocode_input');
    const btn     = document.getElementById(prefix + '_geocode_btn');
    const results = document.getElementById(prefix + '_geocode_results');
    const query   = input.value.trim();

    if (!query) {
        input.focus();
        input.style.borderColor = '#ef4444';
        setTimeout(() => { input.style.borderColor = ''; }, 1500);
        return;
    }

    // State: loading
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-arrow-clockwise geocode-spinner"></i> Mencari...';
    results.innerHTML = '';
    results.classList.remove('show');

    try {
        // Nominatim API — prioritaskan Indonesia
        const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&countrycodes=id&limit=5&addressdetails=1`;
        const res  = await fetch(url, {
            headers: { 'Accept-Language': 'id', 'User-Agent': 'ZakatMasjidApp/1.0' }
        });
        const data = await res.json();

        if (!data || data.length === 0) {
            results.innerHTML = `<div class="geocode-no-result"><i class="bi bi-emoji-frown"></i> Lokasi tidak ditemukan. Coba kata kunci lebih spesifik.</div>`;
            results.classList.add('show');
            return;
        }

        // Render daftar hasil
        results.innerHTML = '';
        data.forEach(function(item) {
            const namaUtama  = item.name || item.display_name.split(',')[0];
            const detailAlamat = item.display_name;
            const lat = parseFloat(item.lat);
            const lng = parseFloat(item.lon);

            const el = document.createElement('div');
            el.className = 'geocode-result-item';
            el.innerHTML = `
                <i class="bi bi-geo-alt-fill"></i>
                <div>
                    <div class="geocode-result-name">${namaUtama}</div>
                    <div class="geocode-result-detail">${detailAlamat}</div>
                </div>
            `;
            el.addEventListener('click', function() {
                pilihHasilGeocoding(prefix, lat, lng, detailAlamat);
            });
            results.appendChild(el);
        });

        results.classList.add('show');

    } catch (err) {
        results.innerHTML = `<div class="geocode-no-result"><i class="bi bi-wifi-off"></i> Gagal menghubungi server. Periksa koneksi internet.</div>`;
        results.classList.add('show');
    } finally {
        // Reset tombol
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-search"></i> Cari di Peta';
    }
}

/**
 * Dipanggil saat admin memilih salah satu hasil geocoding.
 * Menempatkan marker di peta dan mengisi field koordinat.
 */
function pilihHasilGeocoding(prefix, lat, lng, namaLokasi) {
    const results = document.getElementById(prefix + '_geocode_results');
    const input   = document.getElementById(prefix + '_geocode_input');

    // Tutup dropdown hasil
    results.classList.remove('show');
    input.value = namaLokasi.split(',').slice(0, 2).join(',').trim();

    if (prefix === 'tambah') {
        mapTambah.flyTo([lat, lng], DETAIL_ZOOM, { duration: 1.2 });
        pasangMarkerTambah(lat, lng);
    } else {
        mapEdit.flyTo([lat, lng], DETAIL_ZOOM, { duration: 1.2 });
        pasangMarkerEdit(lat, lng);
    }
}

// Tutup dropdown hasil jika klik di luar
document.addEventListener('click', function(e) {
    ['tambah', 'edit'].forEach(function(prefix) {
        const wrap   = document.getElementById('geocodeWrap' + prefix.charAt(0).toUpperCase() + prefix.slice(1));
        const results = document.getElementById(prefix + '_geocode_results');
        if (wrap && results && !wrap.contains(e.target)) {
            results.classList.remove('show');
        }
    });
});

// Tekan Enter di input geocoding = otomatis klik tombol cari
['tambah', 'edit'].forEach(function(prefix) {
    const input = document.getElementById(prefix + '_geocode_input');
    if (input) {
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                cariLokasiGeocoding(prefix);
            }
        });
    }
});

// Auto-isi search bar edit dari nama masjid saat modal dibuka
const _origBukaModalEdit = bukaModalEdit;
bukaModalEdit = function(id, nama, alamat, lat, lng) {
    _origBukaModalEdit(id, nama, alamat, lat, lng);
    setTimeout(function() {
        const inp = document.getElementById('edit_geocode_input');
        if (inp && !inp.value) inp.value = nama;
    }, 200);
};

// ========================================================
// TOGGLE SHOW/HIDE PASSWORD — Modal Tambah Masjid
// ========================================================
function toggleTambahPass(inputId, iconId) {
    const input = document.getElementById(inputId);
    const icon  = document.getElementById(iconId);
    if (!input || !icon) return;
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('bi-eye-slash');
        icon.classList.add('bi-eye');
    } else {
        input.type = 'password';
        icon.classList.remove('bi-eye');
        icon.classList.add('bi-eye-slash');
    }
}
</script>
@endpush