@extends('layouts.admin.master')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-column flex-xl-row justify-content-between align-items-xl-center gap-3 mb-4">
            <div>
                <h3 class="mb-1">Executive Dashboard</h3>
                <p class="text-muted mb-0">Ringkasan pimpinan yang merangkum pulse kota, readiness roadmap, dan indikator penting tanpa harus masuk ke tiap modul detail.</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-md-3">
                        <label class="form-label">Tanggal Snapshot</label>
                        <input type="date" class="form-control" name="date" value="{{ $filters['date'] }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Scope</label>
                        <select class="form-select" name="scope">
                            @foreach (\App\Models\SmartCity\KpiSnapshot::SCOPES as $scopeKey => $scopeLabel)
                                <option value="{{ $scopeKey }}" @selected($filters['scope'] === $scopeKey)>{{ $scopeLabel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">OPD</label>
                        <select class="form-select" name="organization_id">
                            <option value="">Semua OPD</option>
                            @foreach ($organizations as $organization)
                                <option value="{{ $organization->id }}" @selected((string) $filters['organization_id'] === (string) $organization->id)>
                                    {{ $organization->short_name ?: $organization->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-primary w-100" type="submit">Terapkan</button>
                    </div>
                </form>
            </div>
        </div>

        @if (filled(data_get($executiveFilterContext, 'organization_name')))
            <div class="alert alert-primary border-0 shadow-sm mb-4">
                Dashboard eksekutif saat ini difokuskan untuk <strong>{{ data_get($executiveFilterContext, 'organization_name') }}</strong>.
            </div>
        @endif

        <div class="row g-3 mb-4">
            @foreach ($executiveCards as $card)
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100 executive-card executive-card-{{ $card['accent'] }}">
                        <div class="card-body">
                            <div class="executive-icon bg-{{ $card['accent'] }}-subtle text-{{ $card['accent'] }}">
                                <i class="{{ $card['icon'] }}"></i>
                            </div>
                            <div class="display-6 fw-semibold mt-3">{{ $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-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">Pulse Kota</h5>
                        <p class="text-muted mb-0">Ringkasan indikator yang paling sering dibutuhkan di level pimpinan.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row g-3">
                            @foreach ([
                                'total_organizations' => 'Total OPD',
                                'total_complaints' => 'Total Aduan',
                                'overdue_complaints' => 'Aduan Overdue',
                                'total_services' => 'Total Layanan',
                                'total_assets' => 'Total Aset',
                                'mapped_workforce' => 'Workforce Tertaut',
                            ] as $key => $label)
                                <div class="col-md-4">
                                    <div class="rounded-3 bg-light p-3 h-100">
                                        <div class="small text-muted">{{ $label }}</div>
                                        <div class="fs-4 fw-semibold">{{ number_format((int) data_get($executivePulse, $key, 0)) }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Readiness Tahap Akhir</h5>
                        <p class="text-muted mb-0">Kontrol cepat untuk modul matang di tahap 8 dan 9.</p>
                    </div>
                    <div class="card-body pt-2">
                        @foreach ($executiveReadiness as $item)
                            <div class="d-flex justify-content-between align-items-center py-2 border-bottom last-border-0">
                                <span>{{ $item['label'] }}</span>
                                <span class="badge {{ $item['ready'] ? 'bg-success-subtle text-success' : 'bg-secondary-subtle text-secondary' }}">
                                    {{ $item['ready'] ? 'Siap' : 'Belum' }}
                                </span>
                            </div>
                        @endforeach
                    </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">Ringkasan Wilayah Kota</h5>
                        <p class="text-muted mb-0">Konteks wilayah yang menjadi panggung utama pembacaan dashboard pimpinan.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="rounded-3 bg-light p-3 h-100">
                                    <div class="small text-muted">Wilayah Fokus</div>
                                    <div class="fs-5 fw-semibold">{{ data_get($executiveMapSummary, 'scope.name', 'Kota Tomohon') }}</div>
                                    <div class="small text-muted">{{ data_get($executiveMapSummary, 'scope.label', 'Kota') }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="rounded-3 bg-light p-3 h-100">
                                    <div class="small text-muted">Kode Wilayah</div>
                                    <div class="fs-5 fw-semibold">{{ data_get($executiveMapSummary, 'scope.code', '-') ?: '-' }}</div>
                                    <div class="small text-muted">Portal eksekutif tetap menyediakan drilldown wilayah.</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="rounded-3 border p-3 h-100">
                                    <div class="small text-muted">Jumlah Penduduk</div>
                                    <div class="fs-4 fw-semibold">{{ number_format((int) data_get($executiveMapSummary, 'population.total_penduduk', 0)) }}</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="rounded-3 border p-3 h-100">
                                    <div class="small text-muted">Jumlah KK</div>
                                    <div class="fs-4 fw-semibold">{{ number_format((int) data_get($executiveMapSummary, 'population.jumlah_kk', 0)) }}</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="rounded-3 border p-3 h-100">
                                    <div class="small text-muted">Kepadatan / km2</div>
                                    <div class="fs-4 fw-semibold">{{ data_get($executiveMapSummary, 'population.kepadatan_per_km2') !== null ? number_format((float) data_get($executiveMapSummary, 'population.kepadatan_per_km2'), 2) : '-' }}</div>
                                </div>
                            </div>
                        </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">Signal Prioritas Harian</h5>
                        <p class="text-muted mb-0">Indikator yang paling cepat membantu pimpinan menentukan eskalasi.</p>
                    </div>
                    <div class="card-body pt-2">
                        @foreach ($executivePrioritySignals as $signal)
                            <div class="border rounded-4 p-3 mb-3 executive-signal executive-signal-{{ $signal['tone'] }}">
                                <div class="d-flex justify-content-between gap-3">
                                    <div class="fw-semibold">{{ $signal['title'] }}</div>
                                    <div class="fs-5 fw-semibold">{{ $signal['value'] }}</div>
                                </div>
                                <div class="small text-muted mt-2">{{ $signal['description'] }}</div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-4">
            @foreach ($executiveOperationalBoards as $board)
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100 executive-board executive-board-{{ $board['accent'] }}">
                        <div class="card-body">
                            <div class="small text-muted">{{ $board['description'] }}</div>
                            <h5 class="mt-2 mb-3">{{ $board['title'] }}</h5>
                            @foreach ($board['metrics'] as $metric)
                                <div class="d-flex justify-content-between align-items-center py-2 border-bottom last-border-0">
                                    <span>{{ $metric['label'] }}</span>
                                    <span class="fw-semibold">{{ $metric['value'] }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="row g-3">
            <div class="col-xl-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Fokus KPI</h5>
                        <p class="text-muted mb-0">Highlight KPI utama yang menjadi bahan baca cepat pimpinan.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($executiveKpiFocus as $item)
                            <div class="border rounded-4 p-3 mb-3">
                                <div class="d-flex justify-content-between gap-3">
                                    <div class="fw-semibold">{{ $item['title'] }}</div>
                                    <div class="fw-semibold text-{{ $item['accent'] }}">{{ $item['value'] }}</div>
                                </div>
                                <div class="small text-muted mt-2">{{ $item['description'] }}</div>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada KPI yang bisa ditampilkan.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Highlight Snapshot</h5>
                        <p class="text-muted mb-0">Potongan snapshot terbaru untuk memastikan angka lintas domain tetap hidup.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse ($executiveSnapshotHighlights as $snapshot)
                            <div class="d-flex justify-content-between align-items-start gap-3 py-2 border-bottom last-border-0">
                                <div>
                                    <div class="fw-semibold">{{ $snapshot['name'] }}</div>
                                    <div class="small text-muted">{{ $snapshot['domain'] }} · {{ $snapshot['code'] }}</div>
                                </div>
                                <div class="text-end">
                                    <div class="fw-semibold">{{ $snapshot['value_label'] }}</div>
                                    <div class="small text-muted">{{ $snapshot['updated_at'] }}</div>
                                </div>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada snapshot KPI yang siap dibaca.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        .executive-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

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

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

        .executive-card-primary {
            border-top: 4px solid #0d6efd !important;
        }

        .executive-card-success {
            border-top: 4px solid #198754 !important;
        }

        .executive-card-warning {
            border-top: 4px solid #ffc107 !important;
        }

        .executive-card-danger {
            border-top: 4px solid #dc3545 !important;
        }

        .executive-signal-danger {
            border-color: rgba(220, 53, 69, 0.18) !important;
            background: rgba(220, 53, 69, 0.04);
        }

        .executive-signal-warning {
            border-color: rgba(255, 193, 7, 0.24) !important;
            background: rgba(255, 193, 7, 0.08);
        }

        .executive-signal-primary {
            border-color: rgba(13, 110, 253, 0.18) !important;
            background: rgba(13, 110, 253, 0.04);
        }

        .executive-signal-sky {
            border-color: rgba(13, 202, 240, 0.18) !important;
            background: rgba(13, 202, 240, 0.05);
        }

        .executive-signal-dark {
            border-color: rgba(33, 37, 41, 0.18) !important;
            background: rgba(33, 37, 41, 0.04);
        }

        .executive-board-primary {
            border-top: 4px solid #0d6efd !important;
        }

        .executive-board-success {
            border-top: 4px solid #198754 !important;
        }

        .executive-board-warning {
            border-top: 4px solid #ffc107 !important;
        }

        .executive-board-danger {
            border-top: 4px solid #dc3545 !important;
        }
    </style>
@endsection