@extends('layout.main')

@push('style')
<style>
    .tk-stat {
        border-left: 4px solid transparent;
        transition: transform .2s ease;
    }
    .tk-stat:hover { transform: translateX(4px); }
    .tk-stat.green { border-left-color: #6FD68F; }
    .tk-stat.blue  { border-left-color: #5FC7D6; }
    .tk-stat.amber { border-left-color: #FFB46F; }

    .tk-stat-lbl {
        font-size: 10px; text-transform: uppercase;
        letter-spacing: .7px; font-weight: 600;
    }
    .tk-stat-val { font-size: 20px; font-weight: 800; line-height: 1; }
    .tk-stat-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }

    .tk-pb  { display: flex; align-items: center; gap: 6px; }
    .tk-pbt {
        flex: 1; height: 6px;
        background: rgba(128,128,128,.15);
        border-radius: 3px; overflow: hidden;
    }
    .tk-pbf { height: 100%; border-radius: 3px; }

    .tk-bar     { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .tk-bar-lbl { width: 72px; font-size: 11px; text-align: right; flex-shrink: 0; }
    .tk-bar-trk {
        flex: 1; height: 7px;
        background: rgba(128,128,128,.15);
        border-radius: 4px; overflow: hidden;
    }
    .tk-bar-fil { height: 100%; border-radius: 4px; }
    .tk-bar-val { font-size: 11px; min-width: 54px; }

    .tk-erow {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid rgba(128,128,128,.1);
    }
    .tk-erow:last-child { border-bottom: none; }

    .tk-av {
        display: flex; align-items: center; justify-content: center;
        font-size: 10px; font-weight: 700; flex-shrink: 0;
    }

    .tk-code {
        font-size: 10px; padding: 2px 7px; border-radius: 5px;
        font-family: monospace;
        background: rgba(128,128,128,.12);
        border: 1px solid rgba(128,128,128,.2);
        white-space: nowrap;
    }

    /* Donut legend */
    .tk-leg     { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 12px; }
    .tk-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .tk-leg-val { margin-left: auto; font-weight: 700; font-size: 12px; }

    /* Pending row */
    .tk-pend { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; }
    .tk-pend:last-child { margin-bottom: 0; }
    .tk-chip  { border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 700; }

    .tk-divider { height: 1px; background: rgba(128,128,128,.1); margin: 10px 0; }

    /* SVG donut text ikut warna teks tema */
    .tk-donut-num  { fill: var(--bs-body-color); font-size: 15px; font-weight: 800; }
    .tk-donut-sub  { fill: var(--bs-secondary-color, #6c757d); font-size: 9px; }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    @php
    $d = [
        'total_petani'    => 247,
        'total_survey'    => 214,
        'survey_selesai'  => 178,
        'survey_draft'    => 36,
        'total_desa'      => 8,
        'total_kecamatan' => 3,
        'new_month'       => 12,

        'enumerators' => [
            ['name'=>'Enumerator Ngada 1','done'=>72,'target'=>80,'color'=>'#6FD68F','bg'=>'rgba(111,214,143,.24)','tx'=>'#6FD68F'],
            ['name'=>'Enumerator Ngada 2','done'=>58,'target'=>80,'color'=>'#5FC7D6','bg'=>'rgba(95,199,214,.24)','tx'=>'#5FC7D6'],
            ['name'=>'Enumerator Ngada 3','done'=>48,'target'=>80,'color'=>'#FFB46F','bg'=>'rgba(255,180,111,.26)','tx'=>'#FFB46F'],
            ['name'=>'Enumerator Ngada 4','done'=>36,'target'=>80,'color'=>'#F47C86','bg'=>'rgba(244,124,134,.26)','tx'=>'#F47C86'],
        ],

        'recent' => [
            ['code'=>'TKD-2026-0178','name'=>'Markus Bela',  'init'=>'MB','desa'=>'Wangka',   'date'=>'24 Jun 2026','pct'=>100,'status'=>'completed', 'bg'=>'rgba(111,214,143,.24)','tx'=>'#6FD68F'],
            ['code'=>'TKD-2026-0177','name'=>'Theresia Nuka','init'=>'TN','desa'=>'Langa',    'date'=>'23 Jun 2026','pct'=>67, 'status'=>'in_progress','bg'=>'rgba(95,199,214,.24)','tx'=>'#5FC7D6'],
            ['code'=>'TKD-2026-0176','name'=>'Yosef Meo',    'init'=>'YM','desa'=>'Bobo',     'date'=>'22 Jun 2026','pct'=>100,'status'=>'completed', 'bg'=>'rgba(111,214,143,.24)','tx'=>'#6FD68F'],
            ['code'=>'TKD-2026-0175','name'=>'Maria Seda',   'init'=>'MS','desa'=>'Tana Wolo','date'=>'21 Jun 2026','pct'=>22, 'status'=>'draft',      'bg'=>'rgba(255,180,111,.26)','tx'=>'#FFB46F'],
            ['code'=>'TKD-2026-0174','name'=>'Rafael Bolo',  'init'=>'RB','desa'=>'Wangka',   'date'=>'20 Jun 2026','pct'=>11, 'status'=>'draft',      'bg'=>'rgba(244,124,134,.26)','tx'=>'#F47C86'],
        ],

        'komoditas' => [
            ['label'=>'Kopi',  'total'=>148,'pct'=>60,'color'=>'#6FD68F','arc'=>174],
            ['label'=>'Kakao', 'total'=>82, 'pct'=>33,'color'=>'#9D8EF0','arc'=>96],
            ['label'=>'Vanili','total'=>33, 'pct'=>13,'color'=>'#FFB46F','arc'=>38],
            ['label'=>'Kemiri','total'=>22, 'pct'=>9, 'color'=>'#9EA6B0','arc'=>26],
        ],

        'kecamatan' => [
            ['name'=>'Bajawa','total'=>89,'pct'=>78,'color'=>'#6FD68F'],
            ['name'=>'Soa',   'total'=>68,'pct'=>59,'color'=>'#5FC7D6'],
            ['name'=>'Golewa','total'=>57,'pct'=>50,'color'=>'#FFB46F'],
        ],

        'pending' => [
            ['name'=>'Theresia Nuka','section'=>'D4-K3','pct'=>67,'bg'=>'rgba(95,199,214,.24)','tx'=>'#5FC7D6'],
            ['name'=>'Maria Seda',   'section'=>'D2-K2','pct'=>22,'bg'=>'rgba(255,180,111,.26)','tx'=>'#FFB46F'],
            ['name'=>'Rafael Bolo',  'section'=>'D2-K1','pct'=>11,'bg'=>'rgba(244,124,134,.26)', 'tx'=>'#F47C86'],
            ['name'=>'Antonius Wea', 'section'=>'D2-K1','pct'=>0, 'bg'=>'rgba(244,124,134,.26)', 'tx'=>'#F47C86'],
        ],
        'pending_more' => 32,
    ];
    $C = 289; // circumference SVG r=46
    $donutOff = 0;
    @endphp


    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-3">
            <div class="card tk-stat green h-100">
                <div class="card-body">
                    <div class="tk-stat-top">
                        <div class="avatar bg-label-success rounded p-2">
                            <i class="ti tabler-users fs-3"></i>
                        </div>
                        <span class="badge bg-label-success text-success">+{{ $d['new_month'] }} bulan ini</span>
                    </div>
                    <p class="tk-stat-lbl text-muted mb-1">Total Petani</p>
                    <h3 class="tk-stat-val mb-1">{{ number_format($d['total_petani']) }}</h3>
                    <small class="text-muted">{{ $d['total_desa'] }} desa &middot; {{ $d['total_kecamatan'] }} kecamatan</small>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card tk-stat blue h-100">
                <div class="card-body">
                    <div class="tk-stat-top">
                        <div class="avatar bg-label-primary rounded p-2">
                            <i class="ti tabler-clipboard-list fs-3"></i>
                        </div>
                        <span class="badge bg-label-primary text-primary">{{ $d['total_survey'] }} terdaftar</span>
                    </div>
                    <p class="tk-stat-lbl text-muted mb-1">Total Survey</p>
                    <h3 class="tk-stat-val mb-1">{{ number_format($d['total_survey']) }}</h3>
                    <small class="text-muted">dari {{ $d['total_petani'] }} petani</small>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card tk-stat green h-100">
                <div class="card-body">
                    <div class="tk-stat-top">
                        <div class="avatar bg-label-success rounded p-2">
                            <i class="ti tabler-circle-check fs-3"></i>
                        </div>
                        <span class="badge bg-label-success text-success">
                            {{ round($d['survey_selesai'] / $d['total_survey'] * 100) }}%
                        </span>
                    </div>
                    <p class="tk-stat-lbl text-muted mb-1">Survey Selesai</p>
                    <h3 class="tk-stat-val mb-1">{{ number_format($d['survey_selesai']) }}</h3>
                    <small class="text-muted">siap untuk analisis</small>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card tk-stat amber h-100">
                <div class="card-body">
                    <div class="tk-stat-top">
                        <div class="avatar bg-label-warning rounded p-2">
                            <i class="ti tabler-pencil fs-3"></i>
                        </div>
                        <span class="badge bg-label-warning text-warning">
                            {{ round($d['survey_draft'] / $d['total_survey'] * 100) }}%
                        </span>
                    </div>
                    <p class="tk-stat-lbl text-muted mb-1">Survey Draft</p>
                    <h3 class="tk-stat-val mb-1">{{ number_format($d['survey_draft']) }}</h3>
                    <small class="text-muted">belum selesai diisi</small>
                </div>
            </div>
        </div>
    </div>


    <div class="row g-3">
        <div class="col-xl-8">
            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold">
                        <i class="ti tabler-chart-bar me-2 text-success"></i>Progres per Enumerator
                    </h6>
                    <span class="badge bg-label-secondary text-secondary">
                        {{ now()->format('M Y') }}
                    </span>
                </div>
                <div class="card-body">
                    @foreach($d['enumerators'] as $e)
                    @php $pct = round($e['done'] / $e['target'] * 100); @endphp
                    <div class="tk-erow">
                        <div class="tk-av rounded"
                             style="width:36px;height:36px;background:{{ $e['bg'] }};color:{{ $e['tx'] }}">
                            {{ strtoupper(substr($e['name'], 0, 2)) }}
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="fw-semibold" style="font-size:13px">{{ $e['name'] }}</span>
                                <small class="text-muted">{{ $e['done'] }} / {{ $e['target'] }} survey</small>
                            </div>
                            <div class="tk-pb">
                                <div class="tk-pbt">
                                    <div class="tk-pbf" style="width:{{ $pct }}%;background:{{ $e['color'] }}"></div>
                                </div>
                                <small class="text-muted" style="min-width:30px;text-align:right">{{ $pct }}%</small>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Survey Terbaru --}}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold">
                        <i class="ti tabler-clock me-2 text-primary"></i>Survey terbaru
                    </h6>
                    <a href="{{ route('petani.index') }}" class="btn btn-sm btn-outline-success">
                        Lihat semua
                    </a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0" style="font-size:12.5px">
                        <thead class="table-light">
                            <tr>
                                <th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">Kode</th>
                                <th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">Petani</th>
                                <th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">Desa</th>
                                <th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">Tanggal</th>
                                <th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">Progres</th>
                                <th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($d['recent'] as $s)
                            @php
                                $bc = match(true) {
                                    $s['pct'] === 100 => '#6FD68F',
                                    $s['pct'] >= 50   => '#5FC7D6',
                                    $s['pct'] >= 20   => '#FFB46F',
                                    default           => '#F47C86',
                                };
                            @endphp
                            <tr>
                                <td>
                                    <span class="tk-code">{{ $s['code'] }}</span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="tk-av rounded"
                                             style="width:28px;height:28px;background:{{ $s['bg'] }};color:{{ $s['tx'] }}">
                                            {{ $s['init'] }}
                                        </div>
                                        <span class="fw-semibold">{{ $s['name'] }}</span>
                                    </div>
                                </td>
                                <td class="text-muted" style="font-size:12px">{{ $s['desa'] }}</td>
                                <td class="text-muted" style="font-size:11px">{{ $s['date'] }}</td>
                                <td style="min-width:110px">
                                    <div class="tk-pb">
                                        <div class="tk-pbt">
                                            <div class="tk-pbf" style="width:{{ $s['pct'] }}%;background:{{ $bc }}"></div>
                                        </div>
                                        <small class="text-muted" style="min-width:28px;text-align:right">
                                            {{ $s['pct'] }}%
                                        </small>
                                    </div>
                                </td>
                                <td>
                                    @if($s['status'] === 'completed')
                                        <span class="badge bg-label-success text-success">Selesai</span>
                                    @elseif($s['status'] === 'in_progress')
                                        <span class="badge bg-label-primary text-primary">Sedang diisi</span>
                                    @else
                                        <span class="badge bg-label-warning text-warning">Draft</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        <div class="col-xl-4">
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0 fw-bold">
                        <i class="ti tabler-plant me-2 text-success"></i>Distribusi komoditas
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-center py-2">
                        <svg width="120" height="120" viewBox="0 0 120 120"
                             role="img" aria-label="Distribusi komoditas petani">
                            <circle cx="60" cy="60" r="46" fill="none"
                                stroke="rgba(128,128,128,.15)" stroke-width="16"/>
                            @foreach($d['komoditas'] as $k)
                            <circle cx="60" cy="60" r="46" fill="none"
                                stroke="{{ $k['color'] }}" stroke-width="16"
                                stroke-dasharray="{{ $k['arc'] }} {{ $C - $k['arc'] }}"
                                stroke-dashoffset="{{ -$donutOff }}"
                                transform="rotate(-90 60 60)"/>
                            @php $donutOff += $k['arc']; @endphp
                            @endforeach
                            <text x="60" y="56" text-anchor="middle"
                                  class="tk-donut-num" font-size="15" font-weight="800" fill="currentColor">
                                {{ $d['total_petani'] }}
                            </text>
                            <text x="60" y="70" text-anchor="middle"
                                  font-size="9" fill="currentColor" opacity=".5">petani</text>
                        </svg>
                    </div>
                    @foreach($d['komoditas'] as $k)
                    <div class="tk-leg">
                        <div class="tk-leg-dot" style="background:{{ $k['color'] }}"></div>
                        <span class="text-muted">{{ $k['label'] }}</span>
                        <span class="tk-leg-val">
                            {{ $k['total'] }}
                            <span class="text-muted fw-normal" style="font-size:10px">{{ $k['pct'] }}%</span>
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0 fw-bold">
                        <i class="ti tabler-map-pin me-2 text-primary"></i>Per kecamatan
                    </h6>
                </div>
                <div class="card-body">
                    @foreach($d['kecamatan'] as $kec)
                    <div class="tk-bar">
                        <div class="tk-bar-lbl text-muted">{{ $kec['name'] }}</div>
                        <div class="tk-bar-trk">
                            <div class="tk-bar-fil" style="width:{{ $kec['pct'] }}%;background:{{ $kec['color'] }}"></div>
                        </div>
                        <div class="tk-bar-val text-muted">{{ $kec['total'] }} survey</div>
                    </div>
                    @endforeach
                    <div class="tk-divider"></div>
                    <p class="text-center text-muted mb-0" style="font-size:10px">
                        Ngada, Nusa Tenggara Timur &middot; {{ now()->year }}
                    </p>
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold">
                        <i class="ti tabler-clock-pause me-2 text-warning"></i>Draft tertunda
                    </h6>
                    <a href="{{ route('petani.index', ['status' => 'draft']) }}"
                       class="text-success fw-semibold" style="font-size:12px;text-decoration:none">
                        Lihat semua
                    </a>
                </div>
                <div class="card-body">
                    @foreach($d['pending'] as $p)
                    <div class="tk-pend">
                        <span class="text-muted">{{ $p['name'] }}</span>
                        <span class="tk-chip" style="background:{{ $p['bg'] }};color:{{ $p['tx'] }}">
                            {{ $p['section'] }} &middot; {{ $p['pct'] }}%
                        </span>
                    </div>
                    @endforeach
                    <div class="tk-divider"></div>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">+ {{ $d['pending_more'] }} lainnya</small>
                        <a href="{{ route('petani.index', ['status' => 'draft']) }}"
                           class="text-success fw-semibold" style="font-size:11px;text-decoration:none">
                            Lihat semua →
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection