@extends('layouts.admin')

@section('title', 'Dasbor')
@section('page-title', 'Dasbor')
@section('page-subtitle', 'Overview sistem rekrutmen karyawan')

@section('content')
<div class="e-stats-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 2rem;">
    @foreach($stats as $stat)
    <div class="card" style="padding: 1.75rem 2rem; transition: transform 0.15s, box-shadow 0.15s;"
         onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 16px rgba(0,0,0,0.08)';"
         onmouseout="this.style.transform='none'; this.style.boxShadow='';">
        <div style="width: 48px; height: 48px; border-radius: 12px; background: {{ $stat['color'] }}; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;">
            <i class="{{ $stat['icon'] }}" style="color: white; font-size: 1.15rem;"></i>
        </div>
        <div style="font-size: 2.25rem; font-weight: 800; color: #111827; line-height: 1; margin-bottom: 0.5rem;">
            {{ number_format($stat['value']) }}
        </div>
        <div style="font-size: 0.8rem; font-weight: 700; color: #9CA3AF; letter-spacing: 0.5px; text-transform: uppercase;">
            {{ $stat['label'] }}
        </div>
    </div>
    @endforeach
</div>

{{-- Recent Applicants --}}
@if($recentApplicants->count())
<div class="card" style="overflow: hidden;">
    <div style="padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
        <h3 style="font-size: 1rem; font-weight: 700;">Pelamar Terbaru</h3>
        <a href="{{ route('admin.applicants.index') }}" class="btn btn-sm btn-secondary">Lihat Semua</a>
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Nama</th>
                <th>Lowongan</th>
                <th>Status</th>
                <th>Tanggal</th>
            </tr>
        </thead>
        <tbody>
            @foreach($recentApplicants as $applicant)
            <tr>
                <td style="font-weight: 600;">{{ $applicant->full_name }}</td>
                <td>{{ $applicant->vacancy->title ?? '-' }}</td>
                <td>
                    @switch($applicant->status)
                        @case('TERKIRIM') <span class="badge badge-warning">Terkirim</span> @break
                        @case('PROSES') <span class="badge badge-info">Proses</span> @break
                        @case('DITERIMA') <span class="badge badge-success">Diterima</span> @break
                        @case('DITOLAK') <span class="badge badge-danger">Ditolak</span> @break
                        @default <span class="badge badge-secondary">{{ $applicant->status }}</span>
                    @endswitch
                </td>
                <td style="color: var(--text-muted);">{{ $applicant->created_at->format('d M Y') }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endif

<style>
    @media (max-width: 768px) {
        .e-stats-grid { grid-template-columns: 1fr !important; }
    }
</style>
@endsection