@extends('layouts.admin.master')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3 mb-4">
            <div>
                <h3 class="mb-1">{{ $kegiatan->judul }}</h3>
                <p class="text-muted mb-0">{{ $kegiatan->complaint?->kode_tiket ?: 'Tanpa tiket aduan' }} | {{ $kegiatan->organization?->short_name ?: $kegiatan->organization?->name ?: 'Belum ada OPD' }}</p>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @foreach ($quickLinks as $link)
                    @if ($link['route'])
                        <a href="{{ $link['route'] }}" class="btn btn-outline-primary btn-sm" @if (str_starts_with($link['route'], 'http')) target="_blank" rel="noopener" @endif>{{ $link['label'] }}</a>
                    @endif
                @endforeach
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <div class="fw-semibold mb-2">Ada input yang perlu diperbaiki.</div>
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row g-3 mb-4">
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Ringkasan Assignment</h5>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="small text-muted">Jadwal</div>
                                <div class="fw-semibold">{{ optional($kegiatan->tanggal_mulai)->format('d M Y H:i') ?: '-' }} - {{ optional($kegiatan->tanggal_selesai)->format('d M Y H:i') ?: '-' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted">Status</div>
                                <div class="fw-semibold">{{ \App\Models\Kegiatan\Kegiatan::$statuses[$kegiatan->status] ?? ucfirst((string) $kegiatan->status) }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted">Ref Bridge</div>
                                <div class="fw-semibold">{{ $kegiatan->assignment_code ?: ('Assignment #' . $kegiatan->id) }}</div>
                                <div class="small text-muted">{{ $kegiatan->uuid ?: 'UUID belum tersedia' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted">Penanggung jawab</div>
                                <div class="fw-semibold">{{ $kegiatan->penanggungJawab?->nama ?: 'Belum dipilih' }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted">Petugas lapangan</div>
                                <div class="fw-semibold">{{ $kegiatan->petugas->pluck('penduduk.nama')->filter()->implode(', ') ?: 'Belum ada petugas' }}</div>
                            </div>
                            <div class="col-12">
                                <div class="small text-muted">Lokasi</div>
                                <div class="fw-semibold">{{ $kegiatan->lokasi ?: 'Belum ada lokasi rinci' }}</div>
                            </div>
                            <div class="col-12">
                                <div class="small text-muted">Snapshot terakhir</div>
                                @php($latestSnapshot = $kegiatan->presenceSnapshots->first())
                                <div class="fw-semibold">{{ $latestSnapshot?->presence_type_label ?: 'Belum ada snapshot' }}</div>
                                <div class="small text-muted">{{ $latestSnapshot ? optional($latestSnapshot->captured_at)->format('d M Y H:i') : 'Tambahkan snapshot pertama dari form di samping.' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Tambah Snapshot Kehadiran</h5>
                        <p class="text-muted mb-0">Bisa dipakai manual dari admin, browser, atau bridge e-Presensi.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="alert alert-info py-2 small">
                            Untuk bridge e-Presensi, paling aman gunakan <strong>{{ $kegiatan->assignment_code ?: ('ID #' . $kegiatan->id) }}</strong> sebagai referensi assignment.
                        </div>
                        <form method="POST" action="{{ route('admin.smart_city.assignment.presence.store', $kegiatan) }}" class="row g-3">
                            @csrf
                            <div class="col-md-6">
                                <label class="form-label">Tipe Snapshot</label>
                                <select name="presence_type" class="form-select" required>
                                    @foreach (\App\Models\SmartCity\AssignmentPresenceSnapshot::PRESENCE_TYPES as $key => $label)
                                        <option value="{{ $key }}" @selected(old('presence_type') === $key)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Sumber</label>
                                <select name="captured_from" class="form-select">
                                    @foreach (\App\Models\SmartCity\AssignmentPresenceSnapshot::CAPTURED_FROM as $key => $label)
                                        <option value="{{ $key }}" @selected(old('captured_from', 'manual') === $key)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">User Terkait</label>
                                <select name="user_id" class="form-select">
                                    <option value="">Pilih user mapping</option>
                                    @foreach ($mappedUsers as $mapping)
                                        @if ($mapping->user)
                                            <option value="{{ $mapping->user->id }}" @selected((int) old('user_id') === $mapping->user->id)>
                                                {{ $mapping->user->name }} - {{ $mapping->role_label }}
                                            </option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Legacy ID Pegawai</label>
                                <input type="text" name="legacy_pegawai_id" class="form-control" value="{{ old('legacy_pegawai_id') }}" placeholder="Opsional untuk bridge">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Legacy ID Unit Kerja</label>
                                <input type="text" name="legacy_unit_kerja_id" class="form-control" value="{{ old('legacy_unit_kerja_id') }}" placeholder="Opsional untuk bridge">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Latitude</label>
                                <input type="text" name="latitude" class="form-control" value="{{ old('latitude') }}" placeholder="1.3181000">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Longitude</label>
                                <input type="text" name="longitude" class="form-control" value="{{ old('longitude') }}" placeholder="124.8383000">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Akurasi (m)</label>
                                <input type="text" name="accuracy_meters" class="form-control" value="{{ old('accuracy_meters') }}" placeholder="10">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Waktu Capture</label>
                                <input type="datetime-local" name="captured_at" class="form-control" value="{{ old('captured_at', now()->format('Y-m-d\\TH:i')) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Organization Code</label>
                                <input type="text" name="organization_code" class="form-control" value="{{ old('organization_code', $kegiatan->organization?->code) }}" placeholder="Opsional">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Catatan</label>
                                <textarea name="note" rows="3" class="form-control">{{ old('note') }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Payload JSON Opsional</label>
                                <textarea name="payload_json" rows="3" class="form-control" placeholder='{"device":"android","source":"lapangan"}'>{{ old('payload_json') }}</textarea>
                            </div>
                            <div class="col-12 d-grid">
                                <button type="submit" class="btn btn-primary">Simpan Snapshot</button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Template Shift Aktif</h5>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($shiftTemplates as $shiftTemplate)
                            <div class="border rounded-4 p-3 bg-light mb-3">
                                <div class="fw-semibold">{{ $shiftTemplate->name }}</div>
                                <div class="small text-muted">{{ \Illuminate\Support\Str::of($shiftTemplate->start_time)->substr(0, 5) }} - {{ \Illuminate\Support\Str::of($shiftTemplate->end_time)->substr(0, 5) }}</div>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada template shift aktif untuk OPD ini.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Jejak Lokasi Snapshot</h5>
                    </div>
                    <div class="card-body">
                        <div id="presence-snapshot-map" class="rounded-4 border"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Riwayat Snapshot</h5>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($kegiatan->presenceSnapshots as $snapshot)
                            <div class="timeline-item">
                                <div class="timeline-dot"></div>
                                <div class="border rounded-4 p-3 bg-light">
                                    <div class="d-flex flex-column flex-md-row justify-content-between gap-2">
                                        <div>
                                            <div class="fw-semibold">{{ $snapshot->presence_type_label }}</div>
                                            <div class="small text-muted">{{ $snapshot->user?->name ?: 'User belum dipetakan' }} | {{ $snapshot->captured_from_label }}</div>
                                        </div>
                                        <div class="small text-muted text-md-end">{{ optional($snapshot->captured_at)->format('d M Y H:i') ?: '-' }}</div>
                                    </div>
                                    <div class="small mt-2">
                                        @if ($snapshot->latitude !== null && $snapshot->longitude !== null)
                                            {{ $snapshot->latitude }}, {{ $snapshot->longitude }}
                                            @if ($snapshot->accuracy_meters !== null)
                                                | Akurasi {{ number_format($snapshot->accuracy_meters, 1) }} m
                                            @endif
                                        @else
                                            Koordinat belum dikirim.
                                        @endif
                                    </div>
                                    @if ($snapshot->note)
                                        <div class="small mt-2">{{ $snapshot->note }}</div>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada snapshot kehadiran untuk assignment ini.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        #presence-snapshot-map {
            min-height: 360px;
        }

        .timeline-item {
            position: relative;
            padding-left: 28px;
            margin-bottom: 1rem;
        }

        .timeline-dot {
            position: absolute;
            left: 0;
            top: 8px;
            width: 12px;
            height: 12px;
            border-radius: 999px;
            background: #0d6efd;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const mapElement = document.getElementById('presence-snapshot-map');
            const points = @json($presenceMapPoints);

            if (!mapElement || typeof L === 'undefined') {
                return;
            }

            const map = L.map(mapElement).setView(points.length ? [points[0].latitude, points[0].longitude] : [1.3181, 124.8383], points.length ? 14 : 12);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            if (!points.length) {
                return;
            }

            const bounds = [];
            points.forEach(function (point) {
                const marker = L.marker([point.latitude, point.longitude]).addTo(map);
                marker.bindPopup('<strong>' + point.title + '</strong><br>' + point.actor);
                bounds.push([point.latitude, point.longitude]);
            });

            if (bounds.length > 1) {
                map.fitBounds(bounds, { padding: [24, 24] });
            }
        });
    </script>
@endsection