@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">Command Center</h3>
                <p class="text-muted mb-0">Dashboard operasional lintas OPD yang reuse modul pengaduan, layanan, kegiatan, petugas, dan peta Leaflet.</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">{{ $link['label'] }}</a>
                    @endif
                @endforeach
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <form method="GET" class="row g-3 align-items-end">
                    <div class="col-lg-4">
                        <label class="form-label">Filter OPD</label>
                        <select name="opd_id" class="form-select">
                            <option value="">Semua OPD</option>
                            @foreach ($organizations as $organization)
                                <option value="{{ $organization->id }}" @selected((int) ($filters['opd_id'] ?? 0) === $organization->id)>
                                    {{ $organization->short_name ?: $organization->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <label class="form-label">Dari tanggal</label>
                        <input type="date" name="date_from" class="form-control" value="{{ $filters['date_from'] }}">
                    </div>
                    <div class="col-lg-3">
                        <label class="form-label">Sampai tanggal</label>
                        <input type="date" name="date_to" class="form-control" value="{{ $filters['date_to'] }}">
                    </div>
                    <div class="col-lg-2 d-grid">
                        <button type="submit" class="btn btn-primary">Terapkan</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="row g-3 mb-4">
            @foreach ($summaryCards as $card)
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100 command-card command-card-{{ $card['accent'] }}">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="command-icon bg-{{ $card['accent'] }}-subtle text-{{ $card['accent'] }}">
                                    <i class="{{ $card['icon'] }}"></i>
                                </div>
                            </div>
                            <div class="display-6 fw-semibold">{{ number_format($card['value']) }}</div>
                            <h5 class="mt-2 mb-1">{{ $card['title'] }}</h5>
                            <p class="text-muted mb-0">{{ $card['description'] }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="row g-3 mb-4">
            <div class="col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Status Layanan</h5>
                        <p class="text-muted mb-0">Mengecek readiness intake dan keterhubungan layanan ke OPD.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row g-3">
                            @foreach ($serviceStatusCards as $card)
                                <div class="col-md-6">
                                    <div class="rounded-4 bg-light p-3 h-100">
                                        <div class="small text-muted">{{ $card['title'] }}</div>
                                        <div class="fs-3 fw-semibold">{{ number_format($card['value']) }}</div>
                                        <div class="small text-muted">{{ $card['description'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Status Assignment</h5>
                        <p class="text-muted mb-0">Jembatan operasional antara tiket aduan dan modul kegiatan.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row g-3">
                            @foreach ($assignmentStatusCards as $card)
                                <div class="col-md-6">
                                    <div class="rounded-4 bg-light p-3 h-100">
                                        <div class="small text-muted">{{ $card['title'] }}</div>
                                        <div class="fs-3 fw-semibold">{{ number_format($card['value']) }}</div>
                                        <div class="small text-muted">{{ $card['description'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Status Aset Kota</h5>
                        <p class="text-muted mb-0">Inventaris aset yang sudah mulai terhubung ke alur aduan dan maintenance.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row g-3">
                            @foreach ($assetStatusCards as $card)
                                <div class="col-md-6">
                                    <div class="rounded-4 bg-light p-3 h-100">
                                        <div class="small text-muted">{{ $card['title'] }}</div>
                                        <div class="fs-3 fw-semibold">{{ number_format($card['value']) }}</div>
                                        <div class="small text-muted">{{ $card['description'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-4">
            <div class="col-xl-7">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Sebaran Aduan dan Aset di Peta</h5>
                        <p class="text-muted mb-0">Menggabungkan titik aduan dan aset prioritas ke peta operasional yang sama.</p>
                    </div>
                    <div class="card-body">
                        <div id="command-center-map" class="rounded-4 border"></div>
                        <div class="small text-muted mt-3">
                            Marker biru = aduan, marker oranye = aset kota.
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-5">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Aduan Terbaru</h5>
                        <p class="text-muted mb-0">Ringkasan tiket yang paling relevan pada rentang filter aktif.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($latestComplaints as $complaint)
                            <div class="border rounded-4 p-3 mb-3">
                                <div class="d-flex justify-content-between align-items-start gap-3">
                                    <div>
                                        <div class="fw-semibold">{{ $complaint['ticket'] }}</div>
                                        <div>{{ $complaint['title'] }}</div>
                                        <div class="small text-muted">{{ $complaint['organization'] }} | {{ $complaint['reporter'] }}</div>
                                    </div>
                                    <span class="badge {{ $complaint['status_class'] }}">{{ $complaint['status'] }}</span>
                                </div>
                                <div class="small text-muted mt-2">{{ $complaint['reported_at'] ?: '-' }}</div>
                                <a href="{{ $complaint['detail_url'] }}" class="btn btn-sm btn-outline-primary mt-3">Detail Aduan</a>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada aduan pada rentang filter ini.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Kegiatan Hari Ini</h5>
                        <p class="text-muted mb-0">Assignment lapangan reuse dari modul kegiatan existing.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($todayActivities as $activity)
                            <div class="border rounded-4 p-3 mb-3">
                                <div class="d-flex justify-content-between gap-2">
                                    <div class="fw-semibold">{{ $activity['title'] }}</div>
                                    <span class="badge bg-info-subtle text-info">{{ $activity['status'] }}</span>
                                </div>
                                <div class="small text-muted">{{ $activity['ticket'] ?: 'Tanpa tiket' }} | {{ $activity['organization'] }}</div>
                                <div class="small mt-2">{{ $activity['schedule'] }}</div>
                                <div class="small text-muted">{{ $activity['location'] }}</div>
                                <div class="small mt-2">PIC: {{ $activity['person_in_charge'] }}</div>
                                <div class="small text-muted mt-1">{{ implode(', ', $activity['petugas']) ?: 'Belum ada petugas dipilih' }}</div>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada assignment lapangan di rentang filter ini.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Petugas Aktif</h5>
                        <p class="text-muted mb-0">Daftar petugas atau workforce yang sedang aktif berdasarkan assignment dan snapshot operasional.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($activeStaff as $staff)
                            <div class="border rounded-4 p-3 mb-3">
                                <div class="fw-semibold">{{ $staff['name'] }}</div>
                                <div class="small text-muted">{{ $staff['jabatan'] }}</div>
                                <div class="small text-muted mt-1">Snapshot terakhir: {{ $staff['latest_presence'] ?? 'Belum ada snapshot' }}</div>
                                <div class="mt-2">
                                    @foreach ($staff['assignments'] as $assignment)
                                        <div class="small">
                                            {{ $assignment['ticket'] ?: 'Tugas lapangan' }} - {{ $assignment['title'] }} ({{ $assignment['status'] }})
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada petugas aktif pada rentang filter ini.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Aset Kota Kritis</h5>
                        <p class="text-muted mb-0">Aset rusak atau berkondisi buruk yang perlu perhatian cepat.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($criticalAssets as $asset)
                            <div class="border rounded-4 p-3 mb-3">
                                <div class="d-flex justify-content-between gap-3">
                                    <div>
                                        <div class="fw-semibold">{{ $asset['code'] }}</div>
                                        <div>{{ $asset['name'] }}</div>
                                        <div class="small text-muted">{{ $asset['category'] }} | {{ $asset['organization'] }}</div>
                                    </div>
                                    <div class="text-end">
                                        <div class="small text-muted">{{ $asset['status'] }}</div>
                                        <div class="small text-muted">{{ $asset['condition'] }}</div>
                                    </div>
                                </div>
                                <div class="small text-muted mt-2">Maintenance: {{ $asset['next_maintenance_at'] }}</div>
                                <a href="{{ $asset['detail_url'] }}" class="btn btn-sm btn-outline-primary mt-3">Detail Aset</a>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada aset kritis pada filter ini.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Feed Operasional</h5>
                        <p class="text-muted mb-0">Gabungan status aduan, disposisi, assignment, dan maintenance aset.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($operationalFeed as $item)
                            <div class="timeline-entry">
                                <span class="timeline-badge bg-{{ $item['accent'] }}"></span>
                                <div class="border rounded-4 p-3 bg-light">
                                    <div class="d-flex justify-content-between gap-3">
                                        <div>
                                            <div class="small text-muted">{{ $item['label'] }}</div>
                                            <div class="fw-semibold">{{ $item['title'] }}</div>
                                        </div>
                                        <div class="small text-muted text-end">{{ $item['display_time'] }}</div>
                                    </div>
                                    <div class="small mt-2">{{ $item['description'] }}</div>
                                    <div class="small text-muted mt-2">Oleh: {{ $item['actor'] }}</div>
                                </div>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada notifikasi operasional pada rentang filter ini.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        #command-center-map {
            min-height: 460px;
        }

        .command-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .command-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08) !important;
        }

        .command-icon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .command-card-primary { border-top: 4px solid #0d6efd !important; }
        .command-card-warning { border-top: 4px solid #ffc107 !important; }
        .command-card-info { border-top: 4px solid #0dcaf0 !important; }
        .command-card-success { border-top: 4px solid #198754 !important; }

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

        .timeline-badge {
            position: absolute;
            left: 0;
            top: 8px;
            width: 12px;
            height: 12px;
            border-radius: 999px;
        }
    </style>
@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const mapElement = document.getElementById('command-center-map');
            const points = @json($mapPoints);

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

            const defaultCenter = [1.3181, 124.8383];
            const map = L.map(mapElement).setView(defaultCenter, 12);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);

            const bounds = [];
            points.forEach(function (point) {
                if (point.latitude === null || point.longitude === null) {
                    return;
                }

                const marker = point.type === 'asset'
                    ? L.circleMarker([point.latitude, point.longitude], {
                        radius: 9,
                        color: '#f97316',
                        fillColor: '#fb923c',
                        fillOpacity: 0.85,
                    }).addTo(map)
                    : L.marker([point.latitude, point.longitude]).addTo(map);

                const label = point.type === 'asset' ? 'Kategori' : 'Assignment';
                marker.bindPopup(`
                    <div class="fw-semibold">${point.ticket}</div>
                    <div>${point.title}</div>
                    <div class="small text-muted">${point.status}${point.organization ? ' | ' + point.organization : ''}</div>
                    ${point.assignment ? `<div class="small mt-1">${label}: ${point.assignment}</div>` : ''}
                    <a href="${point.detail_url}" class="btn btn-sm btn-outline-primary mt-2">Detail</a>
                `);
                bounds.push([point.latitude, point.longitude]);
            });

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