@extends('layouts.app')

@section('title', 'Dashboard Verifikator')

@push('styles')
<style>
    .verifikator-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;
    }
    .verifikator-stat-card:hover {
        box-shadow: 0 4px 16px rgba(26,107,60,.12);
        transform: translateY(-2px);
    }
    .verifikator-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); }

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

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

@section('content')

{{-- Page Header --}}
<x-ui.page-header
    title="Dashboard Verifikator"
    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-shield-check me-1"></i> VERIFIKATOR
        </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>

{{-- Stat Cards --}}
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-4">
        <div class="verifikator-stat-card">
            <div class="verifikator-stat-icon stat-icon--gold">
                <i class="bi bi-clipboard-check-fill"></i>
            </div>
            <div>
                <div class="verifikator-stat-value">{{ $antrianApprovalDa }}</div>
                <div class="verifikator-stat-label">Antrian Approval DA</div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-4">
        <div class="verifikator-stat-card">
            <div class="verifikator-stat-icon stat-icon--blue">
                <i class="bi bi-journal-check"></i>
            </div>
            <div>
                <div class="verifikator-stat-value">{{ $antrianKeputusan }}</div>
                <div class="verifikator-stat-label">Antrian Keputusan Final</div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-4">
        <div class="verifikator-stat-card">
            <div class="verifikator-stat-icon stat-icon--green">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            <div>
                <div class="verifikator-stat-value">{{ $totalDisetujuiBulanIni }}</div>
                <div class="verifikator-stat-label">Disetujui Bulan Ini</div>
            </div>
        </div>
    </div>
</div>

{{-- Antrian Tugas --}}
<x-ui.section-card title="Antrian Tugas" icon="bi-lightning-charge-fill">
    @if($antrianApprovalDa === 0 && $antrianKeputusan === 0)
        <x-ui.empty-state
            icon="bi-check-all"
            title="Tidak ada tugas aktif"
            desc="Semua batch sudah diproses."
        />
    @else
        <div class="d-flex flex-column gap-3">
            @if($antrianApprovalDa > 0)
            <div class="task-alert-item task-alert-item--approval">
                <div class="d-flex align-items-center gap-3">
                    <div class="task-alert-icon task-alert-icon--approval">
                        <i class="bi bi-clipboard-check-fill"></i>
                    </div>
                    <div>
                        <div class="fw-semibold" style="color:var(--los-gold-light, #c8972e);">
                            {{ $antrianApprovalDa }} batch menunggu Approval DA
                        </div>
                        <small class="text-muted">Penelaah sudah submit — menunggu keputusan Verifikator</small>
                    </div>
                </div>
                <a href="{{ route('verifikator.approval-da.index') }}"
                   class="btn btn-sm btn-warning text-dark fw-semibold flex-shrink-0">
                    <i class="bi bi-arrow-right me-1"></i> Buka Approval DA
                </a>
            </div>
            @endif

            @if($antrianKeputusan > 0)
            <div class="task-alert-item task-alert-item--keputusan">
                <div class="d-flex align-items-center gap-3">
                    <div class="task-alert-icon task-alert-icon--keputusan">
                        <i class="bi bi-journal-check"></i>
                    </div>
                    <div>
                        <div class="fw-semibold text-primary">
                            {{ $antrianKeputusan }} batch menunggu Keputusan Final
                        </div>
                        <small class="text-muted">FA sudah direview Penelaah — menunggu keputusan akhir</small>
                    </div>
                </div>
                <a href="{{ route('verifikator.keputusan.index') }}"
                   class="btn btn-sm btn-primary fw-semibold flex-shrink-0">
                    <i class="bi bi-arrow-right me-1"></i> Buka Keputusan Final
                </a>
            </div>
            @endif
        </div>
    @endif
</x-ui.section-card>

@endsection