@extends('layouts.app')

@section('title', 'Dashboard Petugas Lapangan')

@push('styles')
<style>
    .pl-stat-card {
        background: #fff;
        border: 1px solid var(--los-green-bg);
        border-radius: 12px;
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: var(--los-shadow);
        transition: box-shadow .18s ease, transform .18s ease;
    }
    .pl-stat-card:hover {
        box-shadow: 0 4px 16px rgba(26,107,60,.12);
        transform: translateY(-2px);
    }
    .pl-stat-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
        flex-shrink: 0;
    }
    .stat-icon--gold   { background: rgba(200,151,46,.12); color: var(--los-gold); }
    .stat-icon--blue   { background: rgba(13,110,253,.1);  color: #0d6efd; }
    .stat-icon--green  { background: var(--los-green-bg);  color: var(--los-green); }
    .stat-icon--orange { background: rgba(253,126,20,.1);  color: #fd7e14; }

    .pl-stat-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--los-green-dark);
        line-height: 1;
    }
    .pl-stat-label {
        font-size: .75rem;
        color: #6c757d;
        font-weight: 500;
        margin-top: .2rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .pl-task-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .875rem 1rem;
        border-radius: 10px;
        gap: 1rem;
    }
    .pl-task-item--da {
        background: rgba(200,151,46,.08);
        border: 1px solid rgba(200,151,46,.25);
    }
    .pl-task-item--fa {
        background: rgba(253,126,20,.07);
        border: 1px solid rgba(253,126,20,.2);
    }
    .pl-task-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    .pl-task-icon--da { background: rgba(200,151,46,.15); color: var(--los-gold); }
    .pl-task-icon--fa { background: rgba(253,126,20,.12); color: #fd7e14; }
</style>
@endpush

@section('content')

<x-ui.page-header
    title="Dashboard Petugas Lapangan"
    subtitle="Selamat datang, {{ auth()->user()->name }}"
>
    <x-slot:actions>
        <span class="badge px-3 py-2 text-white" style="background:var(--los-green);font-size:.72rem;letter-spacing:.05em;">
            <i class="bi bi-person-badge me-1"></i> PETUGAS LAPANGAN
        </span>
        <small class="text-muted ms-2 d-none d-md-inline">{{ now()->isoFormat('dddd, D MMMM Y') }}</small>
    </x-slot:actions>
</x-ui.page-header>

{{-- 4 Stat Cards --}}
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="pl-stat-card">
            <div class="pl-stat-icon stat-icon--gold">
                <i class="bi bi-people-fill"></i>
            </div>
            <div>
                <div class="pl-stat-value">{{ $kelompokCount }}</div>
                <div class="pl-stat-label">Kelompok Binaan</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="pl-stat-card">
            <div class="pl-stat-icon stat-icon--blue">
                <i class="bi bi-collection-fill"></i>
            </div>
            <div>
                <div class="pl-stat-value">{{ $rondeAktif }}</div>
                <div class="pl-stat-label">Ronde Aktif</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="pl-stat-card">
            <div class="pl-stat-icon stat-icon--green">
                <i class="bi bi-clipboard-check-fill"></i>
            </div>
            <div>
                <div class="pl-stat-value">{{ $antrianDa }}</div>
                <div class="pl-stat-label">Antrian DA</div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="pl-stat-card">
            <div class="pl-stat-icon stat-icon--orange">
                <i class="bi bi-geo-alt-fill"></i>
            </div>
            <div>
                <div class="pl-stat-value">{{ $antrianFa }}</div>
                <div class="pl-stat-label">Antrian FA</div>
            </div>
        </div>
    </div>
</div>

{{-- Antrian Tugas --}}
<x-ui.section-card title="Antrian Tugas" icon="bi-lightning-fill">

    @if($antrianDa > 0)
    <div class="pl-task-item pl-task-item--da @if($antrianFa > 0) mb-2 @endif">
        <div class="d-flex align-items-center gap-3">
            <div class="pl-task-icon pl-task-icon--da">
                <i class="bi bi-clipboard-check-fill"></i>
            </div>
            <div>
                <div class="fw-semibold" style="font-size:.9rem;">
                    {{ $antrianDa }} debitur menunggu input Desk Analysis
                </div>
                <small class="text-muted">Selesaikan DA sebelum pengajuan dapat dilanjutkan</small>
            </div>
        </div>
        @if(Route::has('desk-analysis.pl.index'))
        <a href="{{ route('desk-analysis.pl.index') }}" class="btn btn-sm btn-outline-warning flex-shrink-0">
            Buka Desk Analysis
        </a>
        @else
        <a href="{{ route('pengajuan-kelompok.index') }}" class="btn btn-sm btn-outline-warning flex-shrink-0">
            Buka Desk Analysis
        </a>
        @endif
    </div>
    @endif

    @if($antrianFa > 0)
    <div class="pl-task-item pl-task-item--fa">
        <div class="d-flex align-items-center gap-3">
            <div class="pl-task-icon pl-task-icon--fa">
                <i class="bi bi-geo-alt-fill"></i>
            </div>
            <div>
                <div class="fw-semibold" style="font-size:.9rem;">
                    {{ $antrianFa }} debitur menunggu Field Analysis
                </div>
                <small class="text-muted">Lakukan survei lapangan dan input hasilnya</small>
            </div>
        </div>
        @if(Route::has('field-officer.fa.index'))
        <a href="{{ route('field-officer.fa.index') }}" class="btn btn-sm btn-outline-warning flex-shrink-0">
            Buka Field Analysis
        </a>
        @else
        <a href="{{ route('pengajuan-kelompok.index') }}" class="btn btn-sm btn-outline-warning flex-shrink-0">
            Buka Field Analysis
        </a>
        @endif
    </div>
    @endif

    @if($antrianDa === 0 && $antrianFa === 0)
    <x-ui.empty-state
        icon="bi-check-all"
        title="Semua tugas selesai"
        desc="Tidak ada antrian Desk Analysis atau Field Analysis saat ini."
    />
    @endif

</x-ui.section-card>

@endsection