@extends('layouts.app')

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

@push('styles')
<style>
    .penelaah-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;
    }
    .penelaah-stat-card:hover {
        box-shadow: 0 4px 16px rgba(26,107,60,.12);
        transform: translateY(-2px);
    }
    .penelaah-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--green  { background: var(--los-green-bg); color: var(--los-green); }
    .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--teal   { background: rgba(13,148,136,.1);  color: #0d9488; }

    .penelaah-stat-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--los-green-dark);
        line-height: 1;
    }
    .penelaah-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--da {
        background: rgba(200,151,46,.08);
        border: 1px solid rgba(200,151,46,.25);
    }
    .task-alert-item--fa {
        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--da { background: rgba(200,151,46,.15); color: var(--los-gold); }
    .task-alert-icon--fa { background: rgba(13,110,253,.12); color: #0d6efd; }
</style>
@endpush

@section('content')

{{-- Page Header --}}
<x-ui.page-header
    title="Dashboard Penelaah"
    subtitle="Selamat datang, {{ auth()->user()->name }}"
>
    <x-slot:actions>
        <span class="badge px-3 py-2 text-white" style="background:var(--los-gold);font-size:.72rem;letter-spacing:.05em;">
            <i class="bi bi-search me-1"></i> PENELAAH
        </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-3">
        <div class="penelaah-stat-card">
            <div class="penelaah-stat-icon stat-icon--green">
                <i class="bi bi-inbox-fill"></i>
            </div>
            <div>
                <div class="penelaah-stat-value">{{ $pengajuanMasuk }}</div>
                <div class="penelaah-stat-label">Pengajuan Masuk</div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3">
        <div class="penelaah-stat-card">
            <div class="penelaah-stat-icon stat-icon--gold">
                <i class="bi bi-clipboard-check-fill"></i>
            </div>
            <div>
                <div class="penelaah-stat-value">{{ $antrianDa }}</div>
                <div class="penelaah-stat-label">Antrian DA</div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3">
        <div class="penelaah-stat-card">
            <div class="penelaah-stat-icon stat-icon--blue">
                <i class="bi bi-geo-alt-fill"></i>
            </div>
            <div>
                <div class="penelaah-stat-value">{{ $antrianFa }}</div>
                <div class="penelaah-stat-label">Antrian FA</div>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3">
        <div class="penelaah-stat-card">
            <div class="penelaah-stat-icon stat-icon--teal">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            <div>
                <div class="penelaah-stat-value">{{ $finalBulanIni }}</div>
                <div class="penelaah-stat-label">Final Bulan Ini</div>
            </div>
        </div>
    </div>
</div>

{{-- Antrian Tugas --}}
<x-ui.section-card title="Antrian Tugas" icon="bi-lightning-charge-fill">
    @if($antrianDa === 0 && $antrianFa === 0)
        <x-ui.empty-state
            icon="bi-check-all"
            title="Semua tugas selesai"
            desc="Tidak ada batch yang menunggu review saat ini."
        />
    @else
        <div class="d-flex flex-column gap-3">
            @if($antrianDa > 0)
            <div class="task-alert-item task-alert-item--da">
                <div class="d-flex align-items-center gap-3">
                    <div class="task-alert-icon task-alert-icon--da">
                        <i class="bi bi-clipboard-check-fill"></i>
                    </div>
                    <div>
                        <div class="fw-semibold" style="color:var(--los-gold-light, #c8972e);">
                            {{ $antrianDa }} batch menunggu input Desk Analysis
                        </div>
                        <small class="text-muted">Debitur berstatus DA PL atau Menunggu DA Penelaah</small>
                    </div>
                </div>
                <a href="{{ route('penelaah.desk-analysis.index') }}"
                   class="btn btn-sm btn-warning text-dark fw-semibold flex-shrink-0">
                    <i class="bi bi-arrow-right me-1"></i> Buka DA
                </a>
            </div>
            @endif

            @if($antrianFa > 0)
            <div class="task-alert-item task-alert-item--fa">
                <div class="d-flex align-items-center gap-3">
                    <div class="task-alert-icon task-alert-icon--fa">
                        <i class="bi bi-geo-alt-fill"></i>
                    </div>
                    <div>
                        <div class="fw-semibold text-primary">
                            {{ $antrianFa }} batch menunggu review Field Analysis
                        </div>
                        <small class="text-muted">Debitur berstatus FA atau Menunggu Review FA</small>
                    </div>
                </div>
                <a href="{{ route('penelaah.field-analysis.index') }}"
                   class="btn btn-sm btn-primary fw-semibold flex-shrink-0">
                    <i class="bi bi-arrow-right me-1"></i> Buka FA
                </a>
            </div>
            @endif
        </div>
    @endif
</x-ui.section-card>

@endsection