@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">SLA & KPI</h3>
                <p class="text-muted mb-0">Pusat kontrol SLA dan KPI agar perhitungan pimpinan tetap ringan, bisa diulang, dan dapat difilter per 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">{{ $link['label'] }}</a>
                    @endif
                @endforeach
            </div>
        </div>

        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <div class="row g-3 align-items-end">
                    <div class="col-lg-9">
                        <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 ($scopeOptions 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 class="col-lg-3">
                        <form method="POST" action="{{ $generateRoute ?? route('admin.smart_city.kpi.generate') }}" class="d-grid gap-2">
                            @csrf
                            <input type="hidden" name="date" value="{{ $filters['date'] }}">
                            <input type="hidden" name="scope" value="{{ $filters['scope'] }}">
                            <input type="hidden" name="organization_id" value="{{ $filters['organization_id'] }}">
                            <button class="btn btn-success" type="submit">Generate Ulang Snapshot SLA & KPI</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-4">
            @forelse ($definitions as $definition)
                @php($snapshot = $definition->snapshots->first())
                <div class="col-xl-3 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <div class="small text-muted">{{ $definition->domain_label }} · {{ $definition->aggregation_type_label }}</div>
                            <div class="fs-4 fw-semibold mt-2">{{ $snapshot?->value_label ?: 'Belum ada' }}</div>
                            <h5 class="mt-2 mb-1">{{ $definition->name }}</h5>
                            <p class="text-muted mb-2">{{ $definition->description }}</p>
                            <div class="small text-muted">Formula: {{ $definition->formula_key }}</div>
                            <div class="small text-muted">Snapshot: {{ optional($snapshot?->updated_at)->format('d M Y H:i') ?: 'Belum digenerate' }}</div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-warning mb-0">Definisi KPI belum tersedia.</div>
                </div>
            @endforelse
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0 pt-4">
                <h5 class="mb-1">Riwayat Snapshot Terbaru</h5>
                <p class="text-muted mb-0">Preview snapshot yang baru tersimpan untuk memastikan generator berjalan sesuai filter.</p>
            </div>
            <div class="card-body pt-2">
                <div class="table-responsive">
                    <table class="table align-middle mb-0">
                        <thead>
                            <tr>
                                <th>KPI</th>
                                <th>OPD</th>
                                <th>Tanggal</th>
                                <th>Scope</th>
                                <th>Nilai</th>
                                <th>Diperbarui</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($recentSnapshots as $snapshot)
                                <tr>
                                    <td>
                                        <div class="fw-semibold">{{ $snapshot->definition?->name ?: $snapshot->definition?->code }}</div>
                                        <div class="small text-muted">{{ $snapshot->definition?->code }}</div>
                                    </td>
                                    <td>{{ $snapshot->organization?->short_name ?: $snapshot->organization?->name ?: 'Semua OPD' }}</td>
                                    <td>{{ optional($snapshot->snapshot_date)->format('d M Y') }}</td>
                                    <td>{{ $snapshot->snapshot_scope_label }}</td>
                                    <td class="fw-semibold">{{ $snapshot->value_label }}</td>
                                    <td>{{ optional($snapshot->updated_at)->format('d M Y H:i') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-4">Belum ada snapshot KPI yang tersimpan.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection