@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">Analytics</h3>
                <p class="text-muted mb-0">Ringkasan kendali lintas pengaduan, layanan, assignment, aset, dan workforce yang menjadi dasar SLA, KPI, dan dashboard pimpinan.</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 Filter</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 analytics-card analytics-card-{{ $card['accent'] }}">
                        <div class="card-body">
                            <div class="analytics-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>

        @if (collect($widgets)->isNotEmpty())
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-0 pt-4">
                    <h5 class="mb-1">Widget Dashboard Aktif</h5>
                    <p class="text-muted mb-0">Daftar widget yang saat ini siap dipakai sebagai pintu masuk analytics lintas domain.</p>
                </div>
                <div class="card-body pt-2">
                    <div class="row g-3">
                        @foreach ($widgets as $widget)
                            <div class="col-xl-3 col-md-6">
                                <div class="border rounded-4 p-3 h-100 bg-light">
                                    <div class="small text-muted">{{ \Illuminate\Support\Str::headline($widget->widget_type) }}</div>
                                    <div class="fw-semibold mt-1">{{ $widget->name }}</div>
                                    <div class="small text-muted mt-2">{{ $widget->code }}</div>
                                    <div class="small mt-2">Sumber: {{ $widget->data_source }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif

        <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">Ringkasan Snapshot</h5>
                        <p class="text-muted mb-0">Tanggal snapshot {{ \Illuminate\Support\Carbon::parse($snapshotDate)->format('d M Y') }} · terakhir digenerate {{ $latestGeneratedAt ?: 'belum ada' }}</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="list-group list-group-flush">
                            @forelse ($snapshotSummary as $snapshot)
                                <div class="list-group-item px-0">
                                    <div class="d-flex justify-content-between align-items-start gap-3">
                                        <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>
                                </div>
                            @empty
                                <div class="text-muted">Belum ada snapshot KPI.</div>
                            @endforelse
                        </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">Distribusi Aduan</h5>
                        <p class="text-muted mb-0">Distribusi status, prioritas, dan kategori aduan pada snapshot aktif.</p>
                    </div>
                    <div class="card-body pt-2">
                        @foreach ([
                            'status_distribution' => 'Status',
                            'priority_distribution' => 'Prioritas',
                            'category_distribution' => 'Kategori',
                        ] as $payloadKey => $label)
                            <div class="mb-3">
                                <div class="small text-muted mb-2">{{ $label }}</div>
                                @forelse (data_get($complaintHealth, $payloadKey, []) as $item)
                                    <div class="d-flex justify-content-between align-items-center border rounded-3 px-3 py-2 mb-2">
                                        <span>{{ $item['label'] }}</span>
                                        <span class="fw-semibold">{{ number_format($item['value']) }}</span>
                                    </div>
                                @empty
                                    <div class="text-muted small">Belum ada data {{ strtolower($label) }}.</div>
                                @endforelse
                            </div>
                        @endforeach
                    </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">Governance Layanan</h5>
                        <p class="text-muted mb-0">Pantauan cakupan layanan ke OPD dan pola workflow yang aktif.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="row g-3 mb-3">
                            <div class="col-6">
                                <div class="rounded-3 bg-light p-3 h-100">
                                    <div class="small text-muted">Total layanan</div>
                                    <div class="fs-4 fw-semibold">{{ number_format((int) data_get($serviceGovernance, 'total_services', 0)) }}</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="rounded-3 bg-light p-3 h-100">
                                    <div class="small text-muted">Submission publik</div>
                                    <div class="fs-4 fw-semibold">{{ number_format((int) data_get($serviceGovernance, 'public_submission_services', 0)) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="small text-muted mb-2">Distribusi workflow</div>
                        @forelse (data_get($serviceGovernance, 'workflow_distribution', []) as $item)
                            <div class="d-flex justify-content-between align-items-center border rounded-3 px-3 py-2 mb-2">
                                <span>{{ $item['label'] }}</span>
                                <span class="fw-semibold">{{ number_format($item['value']) }}</span>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada distribusi workflow.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Produktivitas Assignment</h5>
                        <p class="text-muted mb-0">Performa penugasan lapangan berdasarkan organisasi pada snapshot aktif.</p>
                    </div>
                    <div class="card-body pt-2">
                        <div class="table-responsive">
                            <table class="table align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th>OPD</th>
                                        <th>Total</th>
                                        <th>Selesai</th>
                                        <th>Rate</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse (data_get($assignmentProductivity, 'organization_productivity', []) as $item)
                                        <tr>
                                            <td>{{ $item['label'] }}</td>
                                            <td>{{ number_format($item['total']) }}</td>
                                            <td>{{ number_format($item['completed']) }}</td>
                                            <td>{{ number_format($item['rate'], 2) }}%</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-4">Belum ada data assignment pada periode ini.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Distribusi Aset</h5>
                        <p class="text-muted mb-0">Distribusi kondisi aset aktif yang tercatat.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse (data_get($assetHealth, 'condition_distribution', []) as $item)
                            <div class="d-flex justify-content-between align-items-center border rounded-3 px-3 py-2 mb-2">
                                <span>{{ $item['label'] }}</span>
                                <span class="fw-semibold">{{ number_format($item['value']) }}</span>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada data kondisi aset.</div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-1">Monitor Workforce</h5>
                        <p class="text-muted mb-0">Kehadiran assignment yang terukur dari snapshot lapangan.</p>
                    </div>
                    <div class="card-body pt-2">
                        @forelse (data_get($workforceMonitor, 'organization_presence', []) as $item)
                            <div class="border rounded-3 px-3 py-2 mb-2">
                                <div class="fw-semibold">{{ $item['label'] }}</div>
                                <div class="small text-muted">{{ number_format($item['with_presence']) }} dari {{ number_format($item['total']) }} assignment</div>
                                <div class="small text-primary fw-semibold mt-1">{{ number_format($item['rate'], 2) }}%</div>
                            </div>
                        @empty
                            <div class="text-muted">Belum ada data kehadiran workforce.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

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

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

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

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

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