@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">Smart City Core</h3>
                <p class="text-muted mb-0">Roadmap Smart City Tomohon yang memaksimalkan modul existing, lalu menaikkannya bertahap menjadi platform kota yang lebih matang.</p>
            </div>
            <div class="text-lg-end">
                <span class="badge bg-primary-subtle text-primary fs-6 px-3 py-2">{{ config('smart_city.rollout.active_phase') }}</span>
                <div class="small text-muted mt-2">Roadmap aktif: {{ config('smart_city.rollout.blueprint_document') }}</div>
            </div>
        </div>

        <div class="row g-3 mb-4">
            @foreach ($overviewCards as $card)
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100 smart-city-card smart-city-card-{{ $card['accent'] }}">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="smart-city-icon bg-{{ $card['accent'] }}-subtle text-{{ $card['accent'] }}">
                                    <i class="{{ $card['icon'] }}"></i>
                                </div>
                                @if ($card['route'])
                                    <a class="small fw-semibold text-decoration-none" href="{{ $card['route'] }}">Buka</a>
                                @endif
                            </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-lg-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Progress Tahap</h5>
                        <p class="text-muted mb-0">Ringkasan progres implementasi roadmap v5 yang ikut membaca modul aktif dan dokumen wajib.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="rounded-4 bg-light p-3 mb-3">
                            <div class="small text-muted">Tahap aktif</div>
                            <div class="fs-3 fw-semibold">{{ $roadmapProgress['current_phase']['title'] }}</div>
                            <div class="small text-muted">{{ $roadmapProgress['current_phase']['focus'] }}</div>
                            <div class="small text-muted mt-1">{{ $roadmapProgress['current_phase']['completed_items'] }} dari {{ $roadmapProgress['current_phase']['total_items'] }} target tahap ini sudah jalan</div>
                        </div>
                        <div class="rounded-4 bg-light p-3 mb-3">
                            <div class="small text-muted">Progress keseluruhan</div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div class="fs-3 fw-semibold">{{ $roadmapProgress['overall_progress'] }}%</div>
                                <span class="badge bg-primary-subtle text-primary">{{ $roadmapProgress['completed_phases'] }}/{{ $roadmapProgress['total_phases'] }} tahap selesai</span>
                            </div>
                            <div class="progress progress-thin">
                                <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $roadmapProgress['overall_progress'] }}%" aria-valuenow="{{ $roadmapProgress['overall_progress'] }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="rounded-4 border p-3">
                            <div class="fw-semibold mb-2">{{ $roadmapProgress['current_phase']['title'] }} Checklist</div>
                            @foreach ($roadmapProgress['current_phase']['items'] 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['done'] ? 'bg-success-subtle text-success' : 'bg-secondary-subtle text-secondary' }}">
                                        {{ $item['done'] ? 'Siap' : 'Belum' }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Feature Flag Smart City</h5>
                        <p class="text-muted mb-0">Kontrol aktivasi modul lintas tahap rollout.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="list-group list-group-flush">
                            @foreach ($featureFlags as $flag)
                                <div class="list-group-item px-0 d-flex justify-content-between align-items-center">
                                    <span>{{ $flag['label'] }}</span>
                                    <span class="badge {{ $flag['enabled'] ? 'bg-success-subtle text-success' : 'bg-secondary-subtle text-secondary' }}">
                                        {{ $flag['enabled'] ? 'Aktif' : 'Belum aktif' }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Audit Fondasi Saat Ini</h5>
                        <p class="text-muted mb-0">Ringkasan health-check teknis agar roadmap tetap berjalan di basis aplikasi yang stabil.</p>
                    </div>
                    <div class="card-body pt-2">
                        @php
                            $auditBlocks = [
                                ['label' => 'Admin routes terdeteksi', 'value' => number_format($auditSummary['total_routes_admin'])],
                                ['label' => 'Permission terdaftar', 'value' => number_format($auditSummary['total_permissions'])],
                                ['label' => 'Menu admin aktif', 'value' => number_format($auditSummary['total_admin_menus'])],
                                ['label' => 'Dokumen audit siap', 'value' => $auditSummary['audit_docs_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Dokumen deployment siap', 'value' => $auditSummary['deployment_docs_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Template env siap', 'value' => $auditSummary['env_template_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Master organisasi siap', 'value' => $auditSummary['organizations_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Service catalog siap', 'value' => $auditSummary['service_catalog_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Pengaduan inti siap', 'value' => $auditSummary['complaints_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'GIS core siap', 'value' => $auditSummary['gis_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Assignment siap', 'value' => $auditSummary['assignment_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Command center siap', 'value' => $auditSummary['command_center_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Aset kota siap', 'value' => $auditSummary['asset_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Workforce siap', 'value' => $auditSummary['workforce_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Bridge e-Presensi siap', 'value' => $auditSummary['presensi_bridge_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Analytics siap', 'value' => $auditSummary['analytics_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'SLA & KPI siap', 'value' => $auditSummary['sla_kpi_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Executive dashboard siap', 'value' => $auditSummary['executive_dashboard_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Bantuan sosial siap', 'value' => $auditSummary['social_assistance_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Persampahan siap', 'value' => $auditSummary['waste_management_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Antrian & booking siap', 'value' => $auditSummary['appointment_queue_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Notification center siap', 'value' => $auditSummary['notification_center_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Integrasi siap', 'value' => $auditSummary['integrations_ready'] ? 'Ya' : 'Belum'],
                                ['label' => 'Open data siap', 'value' => $auditSummary['open_data_ready'] ? 'Ya' : 'Belum'],
                            ];
                        @endphp
                        <div class="row g-3">
                            @foreach ($auditBlocks as $block)
                                <div class="col-sm-6">
                                    <div class="p-3 rounded-3 bg-light h-100">
                                        <div class="small text-muted">{{ $block['label'] }}</div>
                                        <div class="fs-4 fw-semibold">{{ $block['value'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </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">Pemetaan Modul Existing ke Smart City</h5>
                        <p class="text-muted mb-0">Prinsip existing-first: modul lama dipertahankan, lalu ditarik menjadi domain lintas kota yang lebih rapi.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="table-responsive">
                            <table class="table align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>Modul Existing</th>
                                        <th>Posisi Target</th>
                                        <th>Readiness</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($legacyMappings as $mapping)
                                        <tr>
                                            <td class="fw-semibold">{{ $mapping['existing'] }}</td>
                                            <td>{{ $mapping['target'] }}</td>
                                            <td><span class="badge bg-primary-subtle text-primary">{{ $mapping['readiness'] }}</span></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </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">Roadmap Implementasi</h5>
                        <p class="text-muted mb-0">Urutan kerja sekarang mengikuti roadmap v5 berbasis tahap.</p>
                    </div>
                    <div class="card-body pt-2">
                        @foreach ($roadmap as $phase)
                            <div class="border rounded-3 p-3 mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="mb-0">{{ $phase['title'] }}</h6>
                                    <span class="badge {{ $phase['status_class'] }}">{{ $phase['status'] }}</span>
                                </div>
                                <div class="small text-muted mb-2">{{ $phase['focus'] }}</div>
                                <div class="d-flex justify-content-between align-items-center small text-muted mb-2">
                                    <span>{{ $phase['completed_items'] }} / {{ $phase['total_items'] }} target</span>
                                    <span>{{ $phase['progress_percentage'] }}%</span>
                                </div>
                                <div class="progress progress-thin mb-3">
                                    <div class="progress-bar {{ $phase['progress_percentage'] === 100 ? 'bg-success' : ($phase['status'] === 'Aktif' ? 'bg-info' : 'bg-secondary') }}" role="progressbar" style="width: {{ $phase['progress_percentage'] }}%" aria-valuenow="{{ $phase['progress_percentage'] }}" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <ul class="mb-0 text-muted ps-3">
                                    @foreach ($phase['items'] as $item)
                                        <li class="{{ $item['done'] ? 'text-dark' : '' }}">
                                            {{ $item['label'] }}
                                            @if ($item['done'])
                                                <span class="small text-success">· siap</span>
                                            @endif
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

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

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

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

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

        .smart-city-card-info {
            border-top: 4px solid #0dcaf0 !important;
        }

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

        .smart-city-card-secondary {
            border-top: 4px solid #6c757d !important;
        }

        .progress-thin {
            height: 8px;
        }

        .last-border-0:last-child {
            border-bottom: 0 !important;
        }
    </style>
@endsection