@extends('admin.layouts.app')

@section('title', 'Dashboard')

@push('styles')
<style>
    .lpsa-dashboard { color: #334155; }
    .lpsa-dash-header { background-color: #004c70; color: white; padding: 32px; border-radius: 12px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
    .lpsa-dash-header h1 { color: white; font-size: 28px; font-weight: 600; margin: 0 0 8px 0; }
    .lpsa-dash-header p { margin: 0; opacity: 0.9; font-size: 15px; }
    .lpsa-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
    .lpsa-stat-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; position: relative; display: flex; flex-direction: column; }
    .lpsa-stat-icon-wrap { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
    .lpsa-stat-value { font-size: 32px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
    .lpsa-stat-label { font-size: 14px; font-weight: 500; color: #64748b; }
    .lpsa-stat-desc { font-size: 12px; color: #94a3b8; margin-top: 4px; }
    .lpsa-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 24px; }
    .lpsa-action-card-lg { background: linear-gradient(135deg, #004c70 0%, #006b9e 100%); border-radius: 12px; padding: 32px; color: white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
    .lpsa-action-card-lg h2 { color: white; font-size: 24px; margin: 0 0 12px 0; }
    .lpsa-action-card-lg p { color: rgba(255,255,255,0.8); margin: 0 0 24px 0; font-size: 15px; max-width: 400px; }
    .lpsa-action-btn-link { display: inline-flex; align-items: center; gap: 8px; color: white; text-decoration: none; font-weight: 500; background: rgba(255,255,255,0.1); padding: 10px 20px; border-radius: 8px; width: fit-content; transition: 0.2s; }
    .lpsa-action-btn-link:hover { background: rgba(255,255,255,0.2); color: white; text-decoration: none; }
    .lpsa-panel-card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
    .lpsa-panel-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: #004c70; margin: 0 0 20px 0; }
    .lpsa-quick-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
    .lpsa-quick-stat-row:last-child { border-bottom: none; }
    .lpsa-quick-stat-label { color: #64748b; font-size: 14px; }
    .lpsa-quick-stat-val { font-weight: 600; color: #0f766e; font-size: 16px; }
    .lpsa-recent-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .lpsa-view-all { color: #004c70; text-decoration: none; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 4px; }
    .lpsa-view-all:hover { text-decoration: underline; }
    .lpsa-list-item { display: flex; align-items: center; padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; transition: 0.2s; text-decoration: none; color: inherit; }
    .lpsa-list-item:hover { border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.02); text-decoration: none; color: inherit; }
    .lpsa-avatar { width: 40px; height: 40px; border-radius: 50%; background: #004c70; color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; margin-right: 16px; flex-shrink: 0; }
    .lpsa-list-info { flex-grow: 1; }
    .lpsa-list-name { font-weight: 600; color: #1e293b; font-size: 15px; margin-bottom: 4px; }
    .lpsa-list-job { color: #64748b; font-size: 13px; }
    .lpsa-list-meta { text-align: right; }
    .lpsa-list-date { color: #94a3b8; font-size: 12px; margin-bottom: 8px; display: block; }
    .lpsa-status-badge { padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; display: inline-block; }
    .lpsa-bottom-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .lpsa-action-sm { padding: 24px; background: white; border-radius: 12px; border: 1px solid #e2e8f0; text-decoration: none; color: inherit; transition: 0.2s; display: flex; flex-direction: column; }
    .lpsa-action-sm:hover { border-color: #94a3b8; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); text-decoration: none; color: inherit; transform: translateY(-2px); }
    .lpsa-action-sm-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
    .lpsa-action-sm h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px 0; color: #1e293b; }
    .lpsa-action-sm p { font-size: 13px; color: #64748b; margin: 0 0 16px 0; }
    .lpsa-action-sm-link { margin-top: auto; color: #004c70; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
</style>
@endpush

@section('content')
<div class="lpsa-dashboard">
    <div class="lpsa-dash-header">
        <div><h1>Panel Admin LPSA Perak</h1><p>Sistem Pengurusan Permohonan Kerja</p></div>
    </div>

    <div class="lpsa-stats-grid">
        <div class="lpsa-stat-card">
            <div class="lpsa-stat-icon-wrap" style="background:#eff6ff; color:#3b82f6;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div>
            <div class="lpsa-stat-value">{{ $totalPermohonan }}</div>
            <div class="lpsa-stat-label">Jumlah Permohonan</div>
        </div>
        <div class="lpsa-stat-card">
            <div class="lpsa-stat-icon-wrap" style="background:#fef9c3; color:#eab308;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div>
            <div class="lpsa-stat-value">{{ $countDalamSemakan }}</div>
            <div class="lpsa-stat-label">Dalam Semakan</div>
            <div class="lpsa-stat-desc">Tindakan diperlukan</div>
        </div>
        <div class="lpsa-stat-card">
            <div class="lpsa-stat-icon-wrap" style="background:#f3e8ff; color:#a855f7;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></div>
            <div class="lpsa-stat-value">{{ $countSenaraiPendek }}</div>
            <div class="lpsa-stat-label">Senarai Pendek</div>
            <div class="lpsa-stat-desc">Untuk temu duga</div>
        </div>
        <div class="lpsa-stat-card">
            <div class="lpsa-stat-icon-wrap" style="background:#dcfce7; color:#22c55e;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg></div>
            <div class="lpsa-stat-value">{{ $countDiluluskan }}</div>
            <div class="lpsa-stat-label">Diluluskan</div>
            <div class="lpsa-stat-desc">Tawaran dibuat</div>
        </div>
    </div>

    <div class="lpsa-main-grid">
        <div class="lpsa-action-card-lg">
            <h2>Urus Permohonan Kerja</h2>
            <p>Semak, nilai dan proses semua permohonan jawatan yang dihantar melalui portal awam.</p>
            <a href="{{ route('admin.permohonan.index') }}" class="lpsa-action-btn-link">
                Pergi ke Panel Pengurusan
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
            </a>
        </div>
        <div class="lpsa-panel-card">
            <h3 class="lpsa-panel-title"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>Statistik Pantas</h3>
            <div class="lpsa-quick-stat-row"><span class="lpsa-quick-stat-label">Jawatan Aktif</span><span class="lpsa-quick-stat-val">{{ $activeJobs }}</span></div>
            <div class="lpsa-quick-stat-row"><span class="lpsa-quick-stat-label">Temu Duga Dijadualkan</span><span class="lpsa-quick-stat-val">{{ $countTemuduga }}</span></div>
            <div class="lpsa-quick-stat-row"><span class="lpsa-quick-stat-label">Kadar Kelulusan</span><span class="lpsa-quick-stat-val" style="color:#22c55e">{{ $kadarKelulusan }}%</span></div>
        </div>
    </div>

    <div class="lpsa-panel-card" style="margin-bottom: 24px;">
        <div class="lpsa-recent-header">
            <h3 class="lpsa-panel-title" style="margin:0;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>Permohonan Terkini</h3>
            <a href="{{ route('admin.permohonan.index') }}" class="lpsa-view-all">Lihat Semua <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg></a>
        </div>
        @if($recentApps->isEmpty())
            <div style="padding: 24px; text-align: center; color: #94a3b8;">Tiada permohonan baru.</div>
        @else
            @foreach($recentApps as $app)
                @php $s = $app->getStatusInfo(); @endphp
                <a href="{{ route('admin.permohonan.show', $app->id) }}" class="lpsa-list-item">
                    <div class="lpsa-avatar">{{ strtoupper(mb_substr($app->nama_penuh, 0, 1)) }}</div>
                    <div class="lpsa-list-info">
                        <div class="lpsa-list-name">{{ $app->nama_penuh }}</div>
                        <div class="lpsa-list-job">{{ $app->jawatan->position_ms ?? '-' }}</div>
                    </div>
                    <div class="lpsa-list-meta">
                        <span class="lpsa-list-date">{{ $app->created_at->format('d/m/Y') }}</span>
                        <span class="lpsa-status-badge" style="background:{{ $s['bg'] }}; color:{{ $s['color'] }}">{{ $s['label'] }}</span>
                    </div>
                    <svg style="margin-left: 16px; color: #cbd5e1;" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
                </a>
            @endforeach
        @endif
    </div>

    <div class="lpsa-bottom-cards">
        <a href="{{ route('admin.jawatan.index') }}" class="lpsa-action-sm">
            <div class="lpsa-action-sm-icon" style="background:#eff6ff; color:#3b82f6;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg></div>
            <h3>Urus Jawatan Kosong</h3>
            <p>Tambah, edit atau padam jawatan yang ditawarkan di portal awam.</p>
            <span class="lpsa-action-sm-link">Urus Jawatan <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg></span>
        </a>
        <a href="{{ route('admin.permohonan.index') }}" class="lpsa-action-sm">
            <div class="lpsa-action-sm-icon" style="background:#e0f2fe; color:#0ea5e9;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg></div>
            <h3>Semak Permohonan</h3>
            <p>Semak dan proses semua permohonan yang diterima.</p>
            <span class="lpsa-action-sm-link">Lihat Permohonan <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg></span>
        </a>
        <a href="{{ route('jawatan.index') }}" target="_blank" class="lpsa-action-sm">
            <div class="lpsa-action-sm-icon" style="background:#dcfce7; color:#22c55e;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg></div>
            <h3>Lihat Portal Awam</h3>
            <p>Pratonton paparan jawatan kosong dari perspektif pemohon kerja.</p>
            <span class="lpsa-action-sm-link">Ke Portal Awam <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg></span>
        </a>
    </div>
</div>
@endsection