@extends('layouts.frontend.master')

@section('content')
    <section class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-auto">
                    <div class="breadcrumbs__content">
                        <div class="breadcrumbs__item"><a href="{{ route('home') }}">Utama</a></div>
                        <div class="breadcrumbs__item"><a href="javascript:void(0)">Pengaduan</a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="page-header -type-1 complaint-hero">
        <div class="container">
            <div class="page-header__content text-white">
                <div class="row justify-center text-center">
                    <div class="col-xl-8 col-lg-10">
                        <h1 class="page-header__title text-white">Pengaduan Warga</h1>
                        <p class="page-header__text text-white">Kirim aduan, lampirkan bukti, pilih titik lokasi di peta, lalu lacak progresnya memakai kode tiket.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="layout-pt-md layout-pb-lg">
        <div class="container">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <div class="row y-gap-30">
                <div class="col-lg-7">
                    <div class="complaint-panel">
                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-25 complaint-panel__heading">
                            <div>
                                <h3 class="text-24 fw-600 mb-1">Kirim Pengaduan</h3>
                                <div class="text-15 text-dark-1">Isi detail aduan dengan ringkas, tandai titik lokasi, lalu sistem akan membuat tiket yang bisa langsung dilacak.</div>
                            </div>
                            <a href="{{ route('pengaduan.tracking') }}" class="button -sm -outline-blue-1 text-blue-1">Lacak Tiket</a>
                        </div>

                        @if ($selectedService)
                            <div class="alert alert-info mb-20">
                                Pengaduan ini terkait layanan <strong>{{ $selectedService->nama }}</strong>.
                                Kamu masih bisa mengganti layanan terkait di form bila diperlukan.
                            </div>
                        @endif

                        <form method="POST" action="{{ route('pengaduan.store') }}" enctype="multipart/form-data" class="complaint-form">
                            @csrf
                            <input type="text" name="honeypot" class="d-none" tabindex="-1" autocomplete="off">

                            <div class="row x-gap-20 y-gap-20">
                                <div class="col-12">
                                    <div class="complaint-form-section-head">
                                        <span class="complaint-form-section-head__kicker">Data Pelapor</span>
                                        <div class="complaint-form-section-head__title">Identitas dasar yang bisa dihubungi</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Nama Pelapor</label>
                                    <input type="text" name="nama_pelapor" value="{{ old('nama_pelapor', auth()->user()->name ?? '') }}" class="form-control @error('nama_pelapor') is-invalid @enderror">
                                    @error('nama_pelapor')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">No. HP</label>
                                    <input type="text" name="no_hp" value="{{ old('no_hp') }}" class="form-control @error('no_hp') is-invalid @enderror">
                                    @error('no_hp')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Email</label>
                                    <input type="email" name="email_pelapor" value="{{ old('email_pelapor', auth()->user()->email ?? '') }}" class="form-control @error('email_pelapor') is-invalid @enderror">
                                    @error('email_pelapor')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <div class="complaint-form-section-head complaint-form-section-head--split">
                                        <span class="complaint-form-section-head__kicker">Detail Aduan</span>
                                        <div class="complaint-form-section-head__title">Masalah, kategori, dan tingkat urgensi</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Kategori</label>
                                    <select name="kategori_id" class="form-select @error('kategori_id') is-invalid @enderror">
                                        <option value="">Pilih kategori pengaduan</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" @selected(old('kategori_id') == $category->id)>{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('kategori_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Judul Aduan</label>
                                    <input type="text" name="judul" value="{{ old('judul') }}" class="form-control @error('judul') is-invalid @enderror">
                                    @error('judul')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Uraian</label>
                                    <textarea name="uraian" rows="5" class="form-control @error('uraian') is-invalid @enderror">{{ old('uraian') }}</textarea>
                                    @error('uraian')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Prioritas</label>
                                    <select name="prioritas" class="form-select">
                                        @foreach (\App\Models\Pengaduan\Aduan::PRIORITIES as $key => $label)
                                            <option value="{{ $key }}" @selected(old('prioritas', 'normal') === $key)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Severity</label>
                                    <select name="severity" class="form-select">
                                        @foreach (\App\Models\Pengaduan\Aduan::SEVERITIES as $key => $label)
                                            <option value="{{ $key }}" @selected(old('severity', 'sedang') === $key)>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Layanan Terkait</label>
                                    <select name="layanan_id" class="form-select">
                                        <option value="">Opsional</option>
                                        @foreach ($serviceOptions as $service)
                                            <option value="{{ $service->id }}" @selected(old('layanan_id', $selectedServiceId) == $service->id)>{{ $service->nama }} {{ $service->kategori ? ' - ' . $service->kategori : '' }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12">
                                    <div class="complaint-form-section-head complaint-form-section-head--split">
                                        <span class="complaint-form-section-head__kicker">Lokasi & Bukti</span>
                                        <div class="complaint-form-section-head__title">Koordinat otomatis dari peta dan lampiran pendukung</div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Alamat / Lokasi Singkat</label>
                                    <textarea name="address_text" id="complaint-address-text" rows="3" class="form-control complaint-location-textarea @error('address_text') is-invalid @enderror" placeholder="Contoh: depan balai lingkungan, samping jembatan, lorong 3, dekat sekolah...">{{ old('address_text') }}</textarea>
                                    <div class="form-text">Tambahkan patokan atau detail lokasi. Titik koordinat akan diisi otomatis dari peta di samping.</div>
                                    @error('address_text')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Latitude</label>
                                    <input type="text" name="latitude" id="complaint-latitude" value="{{ old('latitude') }}" readonly placeholder="Otomatis dari peta" class="form-control complaint-coordinate-input @error('latitude') is-invalid @enderror">
                                    <div class="form-text">Akan terisi saat kamu klik peta atau gunakan lokasi saat ini.</div>
                                    @error('latitude')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Longitude</label>
                                    <input type="text" name="longitude" id="complaint-longitude" value="{{ old('longitude') }}" readonly placeholder="Otomatis dari peta" class="form-control complaint-coordinate-input @error('longitude') is-invalid @enderror">
                                    <div class="form-text">Tidak perlu diketik manual. Sistem akan merekam titik yang dipilih.</div>
                                    @error('longitude')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12">
                                    <label class="form-label">Lampiran</label>
                                    <input type="file" name="attachments[]" multiple class="form-control @error('attachments') is-invalid @enderror @error('attachments.*') is-invalid @enderror">
                                    <div class="form-text">Boleh foto, PDF, atau bukti pendukung lain. Maksimal 5 file, maksimal 2 MB per file.</div>
                                    @error('attachments')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    @error('attachments.*')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mt-25">
                                <button type="submit" class="button -md -dark-1 text-white">Kirim Pengaduan</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-lg-5">
                    <div class="complaint-side-panel mb-30">
                        <h4 class="text-20 fw-600 mb-15">Titik Lokasi</h4>
                        <p class="text-15 text-dark-1 mb-20">Klik peta untuk memilih titik aduan atau gunakan tombol lokasi saat ini agar koordinat terisi otomatis.</p>
                        <div class="complaint-location-toolbar">
                            <button type="button" class="complaint-location-btn complaint-location-btn--primary" id="complaint-current-location">
                                <i class="fas fa-location-arrow"></i>
                                <span>Lokasi Saat Ini</span>
                            </button>
                            <button type="button" class="complaint-location-btn complaint-location-btn--ghost" id="complaint-clear-location">
                                Reset Titik
                            </button>
                        </div>
                        <div class="complaint-location-feedback" id="complaint-location-feedback" hidden></div>
                        <div id="public-complaint-map" class="complaint-map rounded-4"></div>
                        <div class="complaint-location-summary" id="complaint-location-summary">
                            <div class="complaint-location-summary__head">
                                <div>
                                    <span class="complaint-location-summary__kicker">Ringkasan Titik</span>
                                    <h5 id="complaint-location-name">Belum ada titik dipilih</h5>
                                </div>
                                <span class="complaint-location-state" id="complaint-location-state" data-state="idle">Menunggu titik</span>
                            </div>
                            <p class="complaint-location-summary__text" id="complaint-location-summary-text">Koordinat akan terdeteksi otomatis ketika kamu memilih titik di peta.</p>
                            <div class="complaint-location-summary__meta">
                                <div class="complaint-location-summary__item">
                                    <span>Latitude</span>
                                    <strong id="complaint-location-lat-text">-</strong>
                                </div>
                                <div class="complaint-location-summary__item">
                                    <span>Longitude</span>
                                    <strong id="complaint-location-lng-text">-</strong>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="complaint-side-panel">
                        <h4 class="text-20 fw-600 mb-15">Kategori Aktif</h4>
                        <div class="row y-gap-15">
                            @foreach ($categories as $category)
                                <div class="col-12">
                                    <div class="category-card">
                                        <div class="d-flex justify-content-between align-items-start gap-3">
                                            <div>
                                                <div class="fw-600">{{ $category->name }}</div>
                                                <div class="text-14 text-dark-1">{{ $category->description ?: 'Kategori pengaduan operasional.' }}</div>
                                            </div>
                                            <span class="category-pill" style="background: {{ $category->color }}">{{ $category->code }}</span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/templates/frontend/assets/leaflet1.7.1/dist/leaflet.css') }}">
    <style>
        .complaint-hero {
            background: linear-gradient(135deg, rgba(22, 31, 67, 0.92), rgba(15, 126, 133, 0.88)), url('{{ asset('assets/image/header-layanan.png') }}');
            background-size: cover;
            background-position: center;
        }

        .complaint-panel,
        .complaint-side-panel {
            background: #fff;
            border-radius: 24px;
            padding: 28px;
            box-shadow: 0 20px 40px rgba(13, 30, 64, 0.08);
        }

        .complaint-panel__heading {
            border-bottom: 1px solid #eef3f8;
            padding-bottom: 20px;
        }

        .complaint-form-section-head {
            margin-bottom: 4px;
        }

        .complaint-form-section-head--split {
            margin-top: 8px;
            padding-top: 10px;
            border-top: 1px solid #eef3f8;
        }

        .complaint-form-section-head__kicker {
            display: inline-flex;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #0f766e;
            margin-bottom: 6px;
        }

        .complaint-form-section-head__title {
            font-size: 18px;
            font-weight: 700;
            color: #0f172a;
        }

        .complaint-form .form-label {
            display: block;
            margin-bottom: 10px;
            font-size: 13px;
            font-weight: 700;
            color: #0f172a;
        }

        .complaint-form .form-control,
        .complaint-form .form-select {
            min-height: 54px;
            border-radius: 16px;
            border: 1px solid #d7e2ee;
            padding: 14px 16px;
            background: #fbfdff;
            box-shadow: none;
        }

        .complaint-form textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        .complaint-form .form-control:focus,
        .complaint-form .form-select:focus {
            border-color: #1d4ed8;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.08);
        }

        .complaint-form .form-text {
            margin-top: 8px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.6;
        }

        .complaint-location-textarea {
            min-height: 110px !important;
        }

        .complaint-coordinate-input {
            background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%) !important;
            color: #1e3a8a;
            font-weight: 700;
        }

        .complaint-map {
            min-height: 360px;
            border: 1px solid #d9e3f0;
            margin-top: 16px;
        }

        .complaint-location-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .complaint-location-btn {
            border: none;
            border-radius: 14px;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: 0.2s ease;
        }

        .complaint-location-btn--primary {
            background: #0f766e;
            color: #fff;
            box-shadow: 0 14px 28px rgba(15, 118, 110, 0.16);
        }

        .complaint-location-btn--primary:hover {
            background: #115e59;
        }

        .complaint-location-btn--ghost {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .complaint-location-btn--ghost:hover {
            background: #dbeafe;
        }

        .complaint-location-btn:disabled {
            opacity: 0.65;
            cursor: wait;
        }

        .complaint-location-feedback {
            margin-top: 14px;
            padding: 12px 14px;
            border-radius: 14px;
            font-size: 13px;
            line-height: 1.6;
            background: #eff6ff;
            color: #1e3a8a;
        }

        .complaint-location-feedback[data-tone="error"] {
            background: #fef2f2;
            color: #b91c1c;
        }

        .complaint-location-feedback[data-tone="success"] {
            background: #ecfdf5;
            color: #047857;
        }

        .complaint-location-summary {
            margin-top: 16px;
            padding: 18px;
            border-radius: 20px;
            background: #f8fbff;
            border: 1px solid #e1ebf5;
        }

        .complaint-location-summary__head,
        .complaint-location-summary__meta {
            display: flex;
            gap: 12px;
            justify-content: space-between;
            align-items: flex-start;
        }

        .complaint-location-summary__kicker {
            display: inline-flex;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #1d4ed8;
            margin-bottom: 6px;
        }

        .complaint-location-summary h5 {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #0f172a;
        }

        .complaint-location-state {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 700;
            background: #e2e8f0;
            color: #334155;
            white-space: nowrap;
        }

        .complaint-location-state[data-state="ready"] {
            background: #dcfce7;
            color: #166534;
        }

        .complaint-location-state[data-state="loading"] {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .complaint-location-summary__text {
            margin: 12px 0 0;
            color: #475569;
            font-size: 14px;
            line-height: 1.7;
        }

        .complaint-location-summary__meta {
            margin-top: 16px;
        }

        .complaint-location-summary__item {
            flex: 1;
            padding: 14px;
            border-radius: 16px;
            background: #fff;
            border: 1px solid #dbe7f3;
        }

        .complaint-location-summary__item span {
            display: block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 6px;
        }

        .complaint-location-summary__item strong {
            color: #0f172a;
            font-size: 15px;
        }

        .complaint-map-marker,
        .complaint-map-marker__pin {
            width: 24px;
            height: 24px;
        }

        .complaint-map-marker {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .complaint-map-marker__pin {
            position: relative;
            border-radius: 999px 999px 999px 0;
            transform: rotate(-45deg);
            background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
            box-shadow: 0 12px 20px rgba(220, 38, 38, 0.25);
            border: 2px solid rgba(255, 255, 255, 0.9);
        }

        .complaint-map-marker__pin::after {
            content: '';
            position: absolute;
            inset: 5px;
            border-radius: 999px;
            background: #fff;
        }

        .category-card {
            padding: 18px;
            border-radius: 20px;
            background: #f7fafc;
            border: 1px solid #e5edf4;
        }

        .category-pill {
            color: #fff;
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
        }

        @media (min-width: 992px) {
            .complaint-side-panel:first-child {
                position: sticky;
                top: 120px;
            }
        }

        @media (max-width: 767.98px) {
            .complaint-panel,
            .complaint-side-panel {
                border-radius: 20px;
                padding: 20px;
            }

            .complaint-form .form-control,
            .complaint-form .form-select {
                min-height: 50px;
                border-radius: 14px;
                padding: 12px 14px;
            }

            .complaint-map {
                min-height: 300px;
            }

            .complaint-location-toolbar,
            .complaint-location-summary__meta {
                flex-direction: column;
            }

            .complaint-location-btn {
                width: 100%;
            }

            .complaint-location-state {
                margin-top: 6px;
            }
        }
    </style>
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/frontend/assets/leaflet1.7.1/dist/leaflet.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const mapElement = document.getElementById('public-complaint-map');
            if (!mapElement || typeof L === 'undefined') { return; }

            const latInput = document.getElementById('complaint-latitude');
            const lngInput = document.getElementById('complaint-longitude');
            const addressInput = document.getElementById('complaint-address-text');
            const currentLocationButton = document.getElementById('complaint-current-location');
            const clearLocationButton = document.getElementById('complaint-clear-location');
            const feedbackElement = document.getElementById('complaint-location-feedback');
            const stateElement = document.getElementById('complaint-location-state');
            const nameElement = document.getElementById('complaint-location-name');
            const summaryElement = document.getElementById('complaint-location-summary-text');
            const latTextElement = document.getElementById('complaint-location-lat-text');
            const lngTextElement = document.getElementById('complaint-location-lng-text');
            const reverseGeocodeEndpoint = @json(route('peta.api.reverse-geocode'));
            const defaultCenter = [1.3181, 124.8383];
            const parsedLat = Number.parseFloat(latInput.value);
            const parsedLng = Number.parseFloat(lngInput.value);
            const hasInitialPoint = Number.isFinite(parsedLat) && Number.isFinite(parsedLng);
            let marker = null;
            let lastAutoAddress = addressInput?.value?.trim() || '';
            let addressEditedManually = Boolean(lastAutoAddress);
            let reverseLookupController = null;

            const map = L.map(mapElement).setView(hasInitialPoint ? [parsedLat, parsedLng] : defaultCenter, hasInitialPoint ? 15 : 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            const complaintMarkerIcon = L.divIcon({
                className: 'complaint-map-marker',
                html: '<span class="complaint-map-marker__pin" aria-hidden="true"></span>',
                iconSize: [24, 24],
                iconAnchor: [12, 24],
                popupAnchor: [0, -24],
            });

            function setFeedback(message, tone = 'info') {
                if (!feedbackElement) {
                    return;
                }

                if (!message) {
                    feedbackElement.hidden = true;
                    feedbackElement.textContent = '';
                    feedbackElement.dataset.tone = '';
                    return;
                }

                feedbackElement.hidden = false;
                feedbackElement.textContent = message;
                feedbackElement.dataset.tone = tone;
            }

            function setLocationState(message, state = 'idle') {
                if (!stateElement) {
                    return;
                }

                stateElement.textContent = message;
                stateElement.dataset.state = state;
            }

            function syncPosition(latlng) {
                latInput.value = latlng.lat.toFixed(7);
                lngInput.value = latlng.lng.toFixed(7);
                latTextElement.textContent = latInput.value;
                lngTextElement.textContent = lngInput.value;
            }

            function ensureMarker(latlng) {
                if (!marker) {
                    marker = L.marker(latlng, {
                        draggable: true,
                        icon: complaintMarkerIcon,
                    }).addTo(map);
                    marker.on('dragend', function (event) {
                        applySelectedLocation(event.target.getLatLng(), 'Penanda digeser di peta.');
                    });
                    return;
                }

                marker.setLatLng(latlng);
            }

            function resetLocationSummary() {
                latInput.value = '';
                lngInput.value = '';
                latTextElement.textContent = '-';
                lngTextElement.textContent = '-';
                nameElement.textContent = 'Belum ada titik dipilih';
                summaryElement.textContent = 'Koordinat akan terdeteksi otomatis ketika kamu memilih titik di peta.';
                setLocationState('Menunggu titik', 'idle');
                setFeedback('', 'info');
            }

            async function syncLocationNarrative(latlng, sourceMessage) {
                nameElement.textContent = 'Titik aduan tersimpan';
                summaryElement.textContent = sourceMessage;
                setLocationState('Memproses titik', 'loading');

                if (!reverseGeocodeEndpoint) {
                    setLocationState('Titik tersimpan', 'ready');
                    return;
                }

                reverseLookupController?.abort?.();
                reverseLookupController = typeof AbortController !== 'undefined' ? new AbortController() : null;

                try {
                    const response = await fetch(`${reverseGeocodeEndpoint}?lat=${encodeURIComponent(latlng.lat)}&lng=${encodeURIComponent(latlng.lng)}`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        },
                        signal: reverseLookupController?.signal,
                    });

                    if (!response.ok) {
                        throw new Error('Reverse geocode gagal diproses.');
                    }

                    const result = await response.json();
                    const display = result.display || 'Titik aduan tersimpan';
                    const address = result.address || sourceMessage;

                    nameElement.textContent = display;
                    summaryElement.textContent = address;

                    const currentAddress = addressInput?.value?.trim() || '';
                    const shouldReplaceAddress = currentAddress === '' || currentAddress === lastAutoAddress || !addressEditedManually;

                    if (addressInput && shouldReplaceAddress) {
                        addressInput.value = address;
                        lastAutoAddress = address;
                        addressEditedManually = false;
                    }

                    setLocationState('Titik siap dikirim', 'ready');
                    setFeedback('Lokasi aduan berhasil diperbarui.', 'success');
                } catch (error) {
                    if (error.name === 'AbortError') {
                        return;
                    }

                    setLocationState('Titik siap dikirim', 'ready');
                    setFeedback('Titik lokasi tersimpan, tetapi deskripsi lokasinya belum sempat dimuat otomatis.', 'info');
                }
            }

            function applySelectedLocation(latlng, sourceMessage) {
                ensureMarker(latlng);
                syncPosition(latlng);
                map.flyTo([latlng.lat, latlng.lng], Math.max(map.getZoom(), 15), {
                    duration: 0.6,
                });
                syncLocationNarrative(latlng, sourceMessage);
            }

            addressInput?.addEventListener('input', function () {
                const currentAddress = addressInput.value.trim();
                addressEditedManually = currentAddress !== '' && currentAddress !== lastAutoAddress;
            });

            currentLocationButton?.addEventListener('click', function () {
                if (!navigator.geolocation) {
                    setFeedback('Browser ini belum mendukung fitur lokasi saat ini.', 'error');
                    return;
                }

                currentLocationButton.disabled = true;
                setLocationState('Mendeteksi lokasi', 'loading');
                setFeedback('Sedang mengambil koordinat dari perangkat...', 'info');

                navigator.geolocation.getCurrentPosition(function (position) {
                    currentLocationButton.disabled = false;

                    applySelectedLocation(L.latLng(position.coords.latitude, position.coords.longitude), 'Titik diambil dari lokasi perangkat saat ini.');
                }, function (error) {
                    currentLocationButton.disabled = false;
                    setLocationState('Menunggu titik', 'idle');

                    const messages = {
                        1: 'Izin akses lokasi ditolak. Silakan aktifkan izin lokasi atau pilih titik langsung di peta.',
                        2: 'Lokasi perangkat belum bisa dibaca. Coba lagi beberapa saat lagi.',
                        3: 'Pengambilan lokasi melebihi batas waktu. Coba lagi atau pilih titik langsung di peta.',
                    };

                    setFeedback(messages[error.code] || 'Lokasi saat ini belum berhasil dibaca.', 'error');
                }, {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 0,
                });
            });

            clearLocationButton?.addEventListener('click', function () {
                if (marker) {
                    map.removeLayer(marker);
                    marker = null;
                }

                if (addressInput) {
                    const currentAddress = addressInput.value.trim();
                    if (currentAddress === lastAutoAddress || !addressEditedManually) {
                        addressInput.value = '';
                    }
                }

                lastAutoAddress = '';
                addressEditedManually = false;
                resetLocationSummary();
            });

            map.on('click', function (event) {
                applySelectedLocation(event.latlng, 'Titik dipilih langsung dari peta.');
            });

            if (hasInitialPoint) {
                applySelectedLocation(L.latLng(parsedLat, parsedLng), 'Titik sebelumnya dimuat kembali dari data pengaduan.');
            } else {
                resetLocationSummary();
            }

            window.setTimeout(function () {
                map.invalidateSize();
            }, 150);
        });
    </script>
@endsection