@extends('layouts.operator')

@section('title', 'Dashboard Operator')
@section('page-title', 'Dashboard')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <h1 class="page-header-title">Selamat Datang, {{ auth()->user()->name }}</h1>
        <p class="page-header-sub">
            {{ $desa?->nama }} — {{ $desa?->kecamatan?->nama }} &middot; Tahun {{ $tahunAktif?->tahun ?? '-' }}
        </p>
    </div>
    @if(!$data)
    <div class="page-header-actions">
        <a href="{{ route('operator.data-perumahans.create') }}" class="btn btn-primary">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
            Input Data Perumahan
        </a>
    </div>
    @endif
</div>

{{-- CATATAN REVISI --}}
@if($catatan)
<div class="alert alert-warning" style="margin-bottom:20px;">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="18" height="18" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
    <div>
        <strong>Data Anda dikembalikan untuk direvisi:</strong><br>
        {{ $catatan }}
    </div>
</div>
@endif

{{-- STATUS DATA --}}
<div class="stat-grid" style="margin-bottom:24px;">
    <div class="stat-card">
        <div class="stat-card-icon icon-{{ $data ? ($data->status === 'terverifikasi' ? 'success' : ($data->status === 'revisi' ? 'warning' : ($data->status === 'diajukan' ? 'info' : 'gray'))) : 'gray' }}">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
        </div>
        <div class="stat-card-label">Status Data</div>
        <div class="stat-card-value" style="font-size:1.1rem;">{{ $data ? ucfirst($data->status) : 'Belum Input' }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-label">Jumlah Penduduk</div>
        <div class="stat-card-value sm">{{ number_format($statistik['jumlah_penduduk']) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-label">Jumlah KK</div>
        <div class="stat-card-value sm">{{ number_format($statistik['jumlah_kk']) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-label">Jumlah Rumah</div>
        <div class="stat-card-value sm">{{ number_format($statistik['jumlah_rumah']) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-label">RLH</div>
        <div class="stat-card-value sm">{{ number_format($statistik['rlh']) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-label">RTLH</div>
        <div class="stat-card-value sm" style="color:var(--danger);">{{ number_format($statistik['rtlh']) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-card-label">Backlog</div>
        <div class="stat-card-value sm" style="color:var(--warning);">{{ number_format($statistik['backlog']) }}</div>
    </div>
</div>

{{-- PROGRESS PENGISIAN --}}
@if($data)
<div class="card mb-24">
    <div class="card-body">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
            <span style="font-weight:600;font-size:.9rem;">Progress Pengisian Data</span>
            <span style="font-weight:800;color:var(--primary);">{{ $statistik['progress'] }}%</span>
        </div>
        <div class="progress-bar-wrap">
            <div class="progress-bar-fill" style="width:{{ $statistik['progress'] }}%"></div>
        </div>
        <div style="margin-top:16px;display:flex;gap:8px;flex-wrap:wrap;">
            <a href="{{ route('operator.data-perumahans.show', $data) }}" class="btn btn-outline btn-sm">Lihat Detail</a>
            @if(in_array($data->status, ['draft','revisi']))
            <a href="{{ route('operator.data-perumahans.edit', $data) }}" class="btn btn-primary btn-sm">Edit Data</a>
            @endif
        </div>
    </div>
</div>
@endif

{{-- RIWAYAT --}}
<div class="card">
    <div class="card-header">
        <span class="card-title">Riwayat Penginputan</span>
    </div>
    <div class="table-wrapper" style="border:none;border-radius:0 0 var(--radius) var(--radius);">
        <table>
            <thead>
                <tr>
                    <th>Tahun</th>
                    <th>Status</th>
                    <th>Diverifikasi Oleh</th>
                    <th>Tgl Verifikasi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($riwayat as $r)
                <tr>
                    <td class="fw-bold">{{ $r->tahunRekapan?->tahun ?? '-' }}</td>
                    <td><span class="badge badge-{{ $r->status }}">{{ ucfirst($r->status) }}</span></td>
                    <td>{{ $r->verifier?->name ?? '-' }}</td>
                    <td class="text-muted">{{ $r->verified_at ? $r->verified_at->format('d/m/Y') : '-' }}</td>
                </tr>
                @empty
                <tr><td colspan="4" class="text-center text-muted" style="padding:24px;">Belum ada riwayat</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@push('styles')
<style>.mb-24{margin-bottom:24px;}</style>
@endpush
@endsection