@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<!-- Outer wrapper for dashboard content to ground it perfectly -->
<div class="max-w-7xl mx-auto w-full space-y-6">
    
    <!-- Header Page Title & Subtitle -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-2 border-b border-slate-200">
        <div>
            <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">Dashboard Utama</h1>
            <p class="text-xs text-slate-500 mt-1">Kelola dokumen CV ATS-Friendly Anda dan tinjau status kepatuhan secara instan.</p>
        </div>
        <div>
            <a href="{{ route('cv.create') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-xs font-bold shadow-sm transition-all duration-200 cursor-pointer">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>Buat CV Baru</span>
            </a>
        </div>
    </div>

    <!-- Stats Bento Cards Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
        <!-- Stat card 1: Total CV -->
        <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex items-center gap-4 transition-all duration-200 hover:border-indigo-100">
            <div class="p-3 bg-indigo-50 text-indigo-650 rounded-lg">
                <i data-lucide="files" class="w-6 h-6"></i>
            </div>
            <div>
                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Total CV Anda</span>
                <h4 class="text-xl font-extrabold text-slate-900 mt-0.5">{{ count($cvs) }} Dokumen</h4>
            </div>
        </div>

        <!-- Stat card 2: WhatsApp Status -->
        <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex items-center gap-4 transition-all duration-200 hover:border-emerald-100">
            @if(Auth::user()->whatsapp_verified_at)
                <div class="p-3 bg-emerald-50 text-emerald-600 rounded-lg">
                    <i data-lucide="shield-check" class="w-6 h-6"></i>
                </div>
                <div>
                    <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Keamanan WhatsApp</span>
                    <h4 class="text-xl font-extrabold text-slate-900 mt-0.5">Terverifikasi</h4>
                </div>
            @else
                <div class="p-3 bg-amber-50 text-amber-600 rounded-lg">
                    <i data-lucide="shield-alert" class="w-6 h-6"></i>
                </div>
                <div class="flex-grow">
                    <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Keamanan WhatsApp</span>
                    <div class="flex items-center justify-between gap-2 mt-0.5">
                        <h4 class="text-sm font-extrabold text-amber-700">Belum Verifikasi</h4>
                        <a href="{{ route('auth.verify') }}" class="text-[9px] font-extrabold text-indigo-600 hover:underline">Verif</a>
                    </div>
                </div>
            @endif
        </div>

        <!-- Stat card 3: Format Standard -->
        <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm flex items-center gap-4 transition-all duration-200 hover:border-slate-300">
            <div class="p-3 bg-slate-100 text-slate-700 rounded-lg">
                <i data-lucide="layout" class="w-6 h-6"></i>
            </div>
            <div>
                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Format Standar</span>
                <h4 class="text-xl font-extrabold text-slate-900 mt-0.5">ATS-Friendly A4</h4>
            </div>
        </div>
    </div>

    <!-- Main Bento Grid (2 Columns: Left wide list, Right narrow info/profile) -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Left Side: CV Management & list (Col span 2) -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- CV History Card -->
            <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-6 flex flex-col min-h-[380px]">
                <div class="flex justify-between items-center border-b border-slate-100 pb-4 mb-5">
                    <h3 class="text-sm font-bold text-slate-900 flex items-center gap-2">
                        <i data-lucide="folder-kanban" class="text-indigo-650 w-4.5 h-4.5"></i>
                        <span>Riwayat CV Terdaftar</span>
                    </h3>
                </div>

                @if($cvs->isEmpty())
                    <!-- Empty State layout -->
                    <div class="flex-grow flex flex-col items-center justify-center text-center py-12">
                        <div class="w-14 h-14 bg-slate-50 text-slate-400 rounded-full flex items-center justify-center mb-4 border border-slate-200">
                            <i data-lucide="file-x" class="w-6 h-6"></i>
                        </div>
                        <h4 class="text-xs font-bold text-slate-800">Belum ada CV yang dibuat</h4>
                        <p class="text-[11px] text-slate-450 max-w-xs mt-1 mb-5">Anda belum mendaftarkan CV ATS apapun di akun ini. Buat CV pertama Anda sekarang!</p>
                        <a href="{{ route('cv.create') }}" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-xs font-bold transition-all shadow-sm flex items-center gap-1.5 cursor-pointer">
                            <i data-lucide="file-plus" class="w-4 h-4"></i>
                            <span>Buat CV Pertama</span>
                        </a>
                    </div>
                @else
                    <!-- Clean row list -->
                    <div class="space-y-3">
                        @foreach($cvs as $cv)
                            <div class="border border-slate-200 hover:border-indigo-200 rounded-lg p-4 flex flex-col sm:flex-row justify-between sm:items-center gap-3 transition-all duration-200 bg-white hover:shadow-xs">
                                <div class="truncate max-w-sm md:max-w-md flex items-center gap-3">
                                    <div class="p-2 bg-slate-50 text-slate-600 rounded-md border border-slate-200 shrink-0">
                                        <i data-lucide="file-text" class="w-4.5 h-4.5"></i>
                                    </div>
                                    <div class="truncate">
                                        <h4 class="font-bold text-slate-800 truncate text-xs" title="{{ $cv->title }}">{{ $cv->title }}</h4>
                                        <p class="text-[9px] text-slate-400 mt-0.5 flex items-center gap-1 font-semibold">
                                            <i data-lucide="clock" class="w-3 h-3"></i>
                                            <span>Diubah: {{ $cv->updated_at->diffForHumans() }}</span>
                                        </p>
                                    </div>
                                </div>

                                <!-- Action Buttons row -->
                                <div class="flex items-center gap-2 shrink-0">
                                    <a href="{{ route('cv.show', $cv->id) }}" target="_blank" class="px-2.5 py-1.5 bg-slate-50 hover:bg-indigo-50 hover:text-indigo-650 hover:border-indigo-200 border border-slate-200 rounded-md text-[10px] font-bold transition-all flex items-center gap-1.5">
                                        <i data-lucide="printer" class="w-3.5 h-3.5"></i>
                                        <span>Cetak PDF</span>
                                    </a>
                                    <a href="{{ route('cv.edit', $cv->id) }}" class="px-2.5 py-1.5 bg-slate-50 hover:bg-amber-50 hover:text-amber-700 hover:border-amber-200 border border-slate-200 rounded-md text-[10px] font-bold transition-all flex items-center gap-1.5">
                                        <i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
                                        <span>Edit</span>
                                    </a>
                                    <button onclick="deleteCv({{ $cv->id }}, '{{ $cv->title }}')" class="px-2.5 py-1.5 bg-slate-50 hover:bg-red-50 hover:text-red-650 hover:border-red-200 border border-slate-200 rounded-md text-[10px] font-bold transition-all flex items-center gap-1.5 cursor-pointer">
                                        <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                        <span>Hapus</span>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <!-- Bento 2: ATS Guidance (Checklist block) -->
            <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-6">
                <h3 class="text-sm font-bold text-slate-900 mb-4 flex items-center gap-2 border-b border-slate-100 pb-3">
                    <i data-lucide="clipboard-check" class="text-indigo-650 w-4.5 h-4.5"></i>
                    <span>Panduan Kepatuhan Dokumen ATS</span>
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-xs">
                    <!-- DO Section -->
                    <div class="space-y-3">
                        <h4 class="font-bold text-emerald-700 flex items-center gap-1.5">
                            <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
                            <span>Rekomendasi Utama (Wajib Dilakukan)</span>
                        </h4>
                        <ul class="space-y-2 text-slate-655 pl-1.5">
                            <li class="flex items-start gap-2">
                                <span class="text-emerald-500 font-bold mt-0.5">•</span>
                                <span>Gunakan layout satu kolom yang bersih dan terstruktur.</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-emerald-500 font-bold mt-0.5">•</span>
                                <span>Tulis riwayat pekerjaan secara kronologis terbalik (terbaru dahulu).</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-emerald-500 font-bold mt-0.5">•</span>
                                <span>Gunakan font standar sistem yang mudah dibaca seperti Arial atau Sans.</span>
                            </li>
                        </ul>
                    </div>
                    <!-- DONT Section -->
                    <div class="space-y-3">
                        <h4 class="font-bold text-rose-700 flex items-center gap-1.5">
                            <i data-lucide="alert-octagon" class="w-4 h-4 text-rose-600"></i>
                            <span>Larangan Desain (Sangat Dihindari)</span>
                        </h4>
                        <ul class="space-y-2 text-slate-655 pl-1.5">
                            <li class="flex items-start gap-2">
                                <span class="text-rose-500 font-bold mt-0.5">•</span>
                                <span>Hindari rating keahlian berbentuk bintang, bar, atau grafik persentase.</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-rose-500 font-bold mt-0.5">•</span>
                                <span>Hindari penggunaan tabel kompleks bertingkat dan elemen grafis berat.</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-rose-500 font-bold mt-0.5">•</span>
                                <span>Jangan taruh informasi kontak penting di bagian header/footer halaman.</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Side: User Profile Summary & Fast Actions (Col span 1) -->
        <div class="space-y-6">
            <!-- Bento Box 3: Profile info card -->
            <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-6">
                <h3 class="text-sm font-bold text-slate-900 mb-5 flex items-center gap-2 border-b border-slate-100 pb-3">
                    <i data-lucide="user" class="text-indigo-650 w-4.5 h-4.5"></i>
                    <span>Ringkasan Profil Akun</span>
                </h3>
                
                <div class="space-y-4">
                    <div class="flex items-center gap-3 bg-slate-50 p-3 rounded-lg border border-slate-200">
                        <div class="w-9 h-9 rounded-full bg-indigo-650 flex items-center justify-center font-bold text-white text-xs shadow-sm">
                            {{ substr(Auth::user()->name, 0, 1) }}
                        </div>
                        <div class="truncate">
                            <h4 class="text-xs font-bold text-slate-800 truncate leading-snug">{{ Auth::user()->name }}</h4>
                            <p class="text-[9px] text-slate-400 truncate font-semibold">{{ Auth::user()->email }}</p>
                        </div>
                    </div>

                    <div class="text-xs space-y-3.5 pt-1.5">
                        <div class="flex justify-between items-center border-b border-slate-100 pb-2">
                            <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px]">Tipe Keanggotaan</span>
                            <span class="bg-indigo-50 text-indigo-650 px-2 py-0.5 rounded-md font-extrabold text-[9px] border border-indigo-100">PREMIUM PRO</span>
                        </div>
                        <div class="flex justify-between items-center border-b border-slate-100 pb-2">
                            <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px]">Status WhatsApp</span>
                            @if(Auth::user()->whatsapp_verified_at)
                                <span class="bg-emerald-50 text-emerald-600 px-2.5 py-0.5 rounded-md font-extrabold text-[9px] flex items-center gap-0.5 border border-emerald-100">
                                    <i data-lucide="check-circle-2" class="w-3 h-3"></i> Terverifikasi
                                </span>
                            @else
                                <a href="{{ route('auth.verify') }}" class="bg-amber-50 text-amber-700 hover:bg-amber-100 px-2 py-0.5 rounded-md font-extrabold text-[9px] flex items-center gap-0.5 border border-amber-100 transition-colors">
                                    <i data-lucide="alert-circle" class="w-3 h-3"></i> Verifikasi Sekarang
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 border-t border-slate-100 pt-4">
                    <a href="{{ route('profile') }}" class="w-full py-2 bg-slate-50 border border-slate-200 hover:bg-slate-100 hover:border-slate-300 rounded-lg text-xs font-bold text-slate-700 transition-all flex items-center justify-center gap-1 cursor-pointer">
                        <span>Buka Detail Profil</span>
                        <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                    </a>
                </div>
            </div>
            
            <!-- Quick Info Bento Card -->
            <div class="bg-indigo-950 text-white rounded-xl p-6 space-y-4">
                <div class="flex items-center gap-2 text-indigo-300">
                    <i data-lucide="sparkles" class="w-5 h-5"></i>
                    <h4 class="text-xs font-bold uppercase tracking-wider">Mengapa ATS-Friendly?</h4>
                </div>
                <p class="text-[11px] text-indigo-150 leading-relaxed">
                    Lebih dari 90% perusahaan besar menyaring berkas lamaran menggunakan sistem robot pembuat resume (ATS). Layout yang bersih menjamin data Anda terurai secara akurat demi meningkatkan peluang wawancara kerja.
                </p>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
    // Delete CV handler with Swal
    function deleteCv(id, title) {
        Swal.fire({
            title: 'Hapus Dokumen?',
            text: `Apakah Anda yakin ingin menghapus CV "${title}" secara permanen?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(`/cv/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Toast.fire({
                            icon: 'success',
                            title: data.message
                        });
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: data.message || 'Gagal menghapus CV.',
                        });
                    }
                })
                .catch(err => {
                    console.error('Delete CV error:', err);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error Sistem',
                        text: 'Terjadi kegagalan jaringan atau server.',
                    });
                });
            }
        });
    }
</script>
@endsection