@extends('layout.main')

@push('style')
<style>
    .tk-stat {
        border-left: 4px solid transparent;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .tk-stat:hover {
        transform: translateY(-2px);
        box-shadow: 0 .25rem 1rem rgba(34, 48, 62, .08);
    }

    .tk-stat.green { border-left-color: #28a745; }
    .tk-stat.blue  { border-left-color: #007bff; }
    .tk-stat.amber { border-left-color: #fd7e14; }

    .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: 12px;
    }

    .tk-bar:last-child {
        margin-bottom: 0;
    }

    .tk-bar-lbl {
        width: 105px;
        font-size: 11px;
        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: 58px;
    }

    .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-leg {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 7px;
        font-size: 12px;
    }

    .tk-leg:last-child {
        margin-bottom: 0;
    }

    .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;
    }

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

    .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;
    }

    .enumerator-scroll {
        max-height: 244px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 5px;
    }

    .progress-petani-scroll {
        max-height: 575px;
        overflow-y: auto;
        overflow-x: auto;
    }

    .progress-petani-scroll thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--bs-table-bg, #f8f9fa);
        white-space: nowrap;
    }

    .tk-training-scroll {
        max-height: 330px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 5px;
    }

    .enumerator-scroll::-webkit-scrollbar,
    .progress-petani-scroll::-webkit-scrollbar,
    .tk-training-scroll::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .enumerator-scroll::-webkit-scrollbar-thumb,
    .progress-petani-scroll::-webkit-scrollbar-thumb,
    .tk-training-scroll::-webkit-scrollbar-thumb {
        background: rgba(128, 128, 128, .28);
        border-radius: 10px;
    }

    .enumerator-scroll::-webkit-scrollbar-track,
    .progress-petani-scroll::-webkit-scrollbar-track,
    .tk-training-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
</style>
@endpush

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

    {{-- Ringkasan utama --}}
    <div class="row g-3 mb-3">
        <div class="col-md-4">
            <div class="card tk-stat green h-100">
                <div class="card-body">
                    <div class="tk-stat-top">
                        <div>
                            <div class="tk-stat-lbl text-muted mb-2">
                                Total Petani
                            </div>

                            <div class="tk-stat-val">
                                {{ number_format($totalPetani, 0, ',', '.') }}

                                <span class="text-muted fw-normal" style="font-size: 12px">
                                    petani
                                </span>
                            </div>
                        </div>

                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-success">
                                <i class="ti tabler-users"></i>
                            </span>
                        </div>
                    </div>

                    <small class="text-muted">
                        Seluruh petani yang sudah masuk ke sistem
                    </small>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card tk-stat blue h-100">
                <div class="card-body">
                    <div class="tk-stat-top">
                        <div>
                            <div class="tk-stat-lbl text-muted mb-2">
                                Total Luas Lahan
                            </div>

                            <div class="tk-stat-val">
                                {{ number_format($totalLuasLahan, 2, ',', '.') }}

                                <span class="text-muted fw-normal" style="font-size: 12px">
                                    ha
                                </span>
                            </div>
                        </div>

                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-primary">
                                <i class="ti tabler-map-2"></i>
                            </span>
                        </div>
                    </div>

                    <small class="text-muted">
                        Akumulasi luas seluruh lahan petani
                    </small>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card tk-stat amber h-100">
                <div class="card-body">
                    <div class="tk-stat-top">
                        <div>
                            <div class="tk-stat-lbl text-muted mb-2">
                                Total Tanaman
                            </div>

                            <div class="tk-stat-val">
                                {{ number_format($totalJumlahTanaman, 0, ',', '.') }}

                                <span class="text-muted fw-normal" style="font-size: 12px">
                                    tanaman
                                </span>
                            </div>
                        </div>

                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-warning">
                                <i class="ti tabler-trees"></i>
                            </span>
                        </div>
                    </div>

                    <small class="text-muted">
                        Akumulasi jumlah tanaman seluruh lahan
                    </small>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3">
        {{-- Kolom utama --}}
        <div class="col-xl-8">
            {{-- Progres enumerator --}}
            <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">
                    @php
                        $maxDone = $enumerators->max('done') ?: 1;
                    @endphp

                    @if ($enumerators->isNotEmpty())
                        <div class="enumerator-scroll">
                            @foreach ($enumerators as $e)
                                @php
                                    $pct = round(($e['done'] / $maxDone) * 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">
                                                {{ number_format($e['done'], 0, ',', '.') }} survei
                                            </small>
                                        </div>

                                        <div class="tk-pb">
                                            <div class="tk-pbt">
                                                <div
                                                    class="tk-pbf"
                                                    style="
                                                        width: {{ $pct }}%;
                                                        background: {{ $e['color'] }};
                                                    "
                                                ></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center text-muted py-3">
                            Belum ada data enumerator.
                        </div>
                    @endif
                </div>
            </div>

            {{-- Progres data petani --}}
            <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-list-check me-2 text-success"></i>
                        Progres Data Petani
                    </h6>

                    <span class="badge bg-label-secondary text-secondary">
                        {{ $progressPetani->count() }} petani
                    </span>
                </div>

                <div class="table-responsive progress-petani-scroll">
                    <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">
                                    Petani
                                </th>

                                <th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
                                    Komoditas
                                </th>

                                <th class="text-center"
                                    style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
                                    Lahan
                                </th>

                                <th class="text-center"
                                    style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
                                    Praktik Budidaya
                                </th>

                                <th class="text-center"
                                    style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
                                    Sosial Ekonomi
                                </th>

                                <th class="text-center"
                                    style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
                                    Akses Pasar
                                </th>

                                <th style="
                                        min-width: 140px;
                                        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>
                            @forelse ($progressPetani as $petani)
                                @php
                                    $barColor = match (true) {
                                        $petani['percent'] === 100 => '#28a745',
                                        $petani['percent'] >= 50   => '#007bff',
                                        $petani['percent'] >= 20   => '#fd7e14',
                                        default                    => '#dc3545',
                                    };

                                    $initial = collect(explode(' ', trim($petani['name'])))
                                        ->filter()
                                        ->take(2)
                                        ->map(fn ($word) => strtoupper(substr($word, 0, 1)))
                                        ->implode('');
                                @endphp

                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div
                                                class="tk-av rounded"
                                                style="
                                                    width: 28px;
                                                    height: 28px;
                                                    background: rgba(40,167,69,.15);
                                                    color: #28a745;
                                                "
                                            >
                                                {{ $initial ?: 'PT' }}
                                            </div>

                                            <span class="fw-semibold">
                                                {{ $petani['name'] }}
                                            </span>
                                        </div>
                                    </td>

                                    <td>
                                        <span
                                            class="badge bg-label-secondary text-secondary"
                                            title="{{ $petani['komoditas'] }}"
                                        >
                                            {{ $petani['komoditas'] }}
                                        </span>
                                    </td>

                                    @foreach ($petani['status'] as $status)
                                        <td class="text-center">
                                            @if ($status['done'])
                                                <span
                                                    class="badge rounded-pill bg-label-success text-success"
                                                    title="{{ $status['label'] }} lengkap"
                                                >
                                                    <i class="ti tabler-check"></i>
                                                </span>
                                            @else
                                                <span
                                                    class="badge rounded-pill bg-label-secondary text-secondary"
                                                    title="{{ $status['label'] }} belum lengkap"
                                                >
                                                    <i class="ti tabler-minus"></i>
                                                </span>
                                            @endif
                                        </td>
                                    @endforeach

                                    <td style="min-width: 140px">
                                        <div class="tk-pb">
                                            <div class="tk-pbt">
                                                <div
                                                    class="tk-pbf"
                                                    style="
                                                        width: {{ $petani['percent'] }}%;
                                                        background: {{ $barColor }};
                                                    "
                                                ></div>
                                            </div>

                                            <small
                                                class="text-muted"
                                                style="min-width: 30px; text-align: right"
                                            >
                                                {{ $petani['percent'] }}%
                                            </small>
                                        </div>
                                    </td>

                                    <td>
                                        @if ($petani['percent'] === 100)
                                            <span class="badge bg-label-success text-success">
                                                Selesai
                                            </span>
                                        @elseif ($petani['percent'] > 0)
                                            <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>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">
                                        Belum ada data petani.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Kolom samping --}}
        <div class="col-xl-4">
            {{-- Distribusi komoditas petani --}}
            <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">
                    @if ($komoditas->isNotEmpty())
                        @php
                            $donutOff = 0;
                        @endphp

                        <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 ($komoditas as $k)
                                    <circle
                                        cx="60"
                                        cy="60"
                                        r="46"
                                        fill="none"
                                        stroke="{{ $k['color'] }}"
                                        stroke-width="16"
                                        stroke-dasharray="
                                            {{ $k['arc'] }}
                                            {{ $circumference - $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"
                                >
                                    {{ $totalPetani }}
                                </text>

                                <text
                                    x="60"
                                    y="70"
                                    text-anchor="middle"
                                    class="tk-donut-sub"
                                >
                                    petani
                                </text>
                            </svg>
                        </div>

                        @foreach ($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">
                                    {{ number_format($k['total'], 0, ',', '.') }}

                                    <span
                                        class="text-muted fw-normal"
                                        style="font-size: 10px"
                                    >
                                        {{ $k['pct'] }}%
                                    </span>
                                </span>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center text-muted py-4">
                            Belum ada data distribusi komoditas.
                        </div>
                    @endif
                </div>
            </div>

            {{-- Jumlah tanaman per komoditas --}}
            <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-trees me-2 text-primary"></i>
                        Tanaman per Komoditas
                    </h6>

                    <span class="badge bg-label-primary text-primary">
                        {{ number_format($totalJumlahTanaman, 0, ',', '.') }}
                    </span>
                </div>

                <div class="card-body">
                    @if ($tanamanPerKomoditas->isNotEmpty())
                        @foreach ($tanamanPerKomoditas as $tanaman)
                            <div class="tk-bar">
                                <span
                                    class="tk-bar-lbl text-muted text-truncate"
                                    title="{{ $tanaman['label'] }}"
                                >
                                    {{ $tanaman['label'] }}
                                </span>

                                <div class="tk-bar-trk">
                                    <div
                                        class="tk-bar-fil"
                                        style="
                                            width: {{ $tanaman['pct'] }}%;
                                            background: {{ $tanaman['color'] }};
                                        "
                                    ></div>
                                </div>

                                <span class="tk-bar-val fw-semibold text-end">
                                    {{ number_format($tanaman['total'], 0, ',', '.') }}
                                </span>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center text-muted py-4">
                            Belum ada data jumlah tanaman.
                        </div>
                    @endif
                </div>
            </div>

            {{-- Pelatihan GAP --}}
            <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-school me-2 text-warning"></i>
                        Pelatihan GAP
                    </h6>

                    <span class="badge bg-label-warning text-warning">
                        {{ number_format($totalPetaniPelatihan, 0, ',', '.') }} petani
                    </span>
                </div>

                <div class="card-body">
                    @if ($pelatihanGap->isNotEmpty())
                        <div class="tk-training-scroll">
                            @foreach ($pelatihanGap as $pelatihan)
                                <div class="tk-erow">
                                    <div
                                        class="tk-av rounded"
                                        style="
                                            width: 34px;
                                            height: 34px;
                                            background: {{ $pelatihan['bg'] }};
                                            color: {{ $pelatihan['tx'] }};
                                        "
                                    >
                                        <i class="ti tabler-certificate"></i>
                                    </div>

                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-center gap-2">
                                            <span
                                                class="fw-semibold"
                                                style="font-size: 12px"
                                            >
                                                {{ $pelatihan['label'] }}
                                            </span>

                                            <span
                                                class="badge flex-shrink-0"
                                                style="
                                                    background: {{ $pelatihan['bg'] }};
                                                    color: {{ $pelatihan['tx'] }};
                                                "
                                            >
                                                {{ $pelatihan['total'] }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="tk-divider"></div>

                        <small class="text-muted">
                            Satu petani dapat tercatat pada lebih dari satu jenis pelatihan.
                        </small>
                    @else
                        <div class="text-center text-muted py-4">
                            Belum ada data pelatihan.
                        </div>
                    @endif
                </div>
            </div>

            {{-- Sertifikasi --}}
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center gap-3">
                            <div class="avatar">
                                <span class="avatar-initial rounded bg-label-success">
                                    <i class="ti tabler-rosette-discount-check"></i>
                                </span>
                            </div>

                            <div>
                                <div class="tk-stat-lbl text-muted mb-1">
                                    Petani Bersertifikasi
                                </div>

                                <div class="d-flex align-items-baseline gap-1">
                                    <span class="tk-stat-val">
                                        {{ number_format(
                                            $totalPetaniBersertifikat,
                                            0,
                                            ',',
                                            '.'
                                        ) }}
                                    </span>

                                    <span class="text-muted" style="font-size: 12px">
                                        petani
                                    </span>
                                </div>
                            </div>
                        </div>

                        <span class="badge bg-label-success text-success">
                            {{ number_format(
                                $totalPetaniSertifikatAktif,
                                0,
                                ',',
                                '.'
                            ) }}
                            aktif
                        </span>
                    </div>

                    <div class="tk-divider"></div>

                    <small class="text-muted">
                        Petani unik yang memiliki minimal satu riwayat sertifikasi.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection