@extends('layouts.app')

@section('title', 'Profil Pengguna')

@section('content')
<div class="max-w-7xl mx-auto w-full space-y-6">
    
    <!-- Title Page Header -->
    <div class="pb-2 border-b border-slate-200">
        <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight flex items-center gap-2">
            <i data-lucide="user" class="text-indigo-650 w-6 h-6"></i> 
            <span>Profil Saya</span>
        </h1>
        <p class="text-xs text-slate-500 mt-1">Kelola informasi akun dasar Anda, ringkasan kontak, dan pantau riwayat dokumen Anda.</p>
    </div>

    <!-- Bento UI Grid Layout (2 Columns Left, 1 Column Right) -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Column Left (CV History & Active Resume) -->
        <div class="lg:col-span-2 space-y-6">
            
            <!-- Bento 1: CV Tersimpan Terbaru -->
            <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-6">
                <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider mb-4 flex items-center gap-2 border-b border-slate-100 pb-3">
                    <i data-lucide="file-check" class="text-indigo-650 w-4 h-4"></i>
                    <span>Resume Terakhir Diperbarui</span>
                </h3>

                @if(!$latestCv)
                    <div class="py-12 flex flex-col items-center justify-center text-center">
                        <div class="w-14 h-14 bg-slate-50 text-slate-400 rounded-full flex items-center justify-center mb-3 border border-slate-200">
                            <i data-lucide="file-x-2" class="w-6 h-6"></i>
                        </div>
                        <h4 class="text-xs font-bold text-slate-800">Belum ada resume aktif</h4>
                        <p class="text-[11px] text-slate-450 max-w-xs mt-1 mb-4">Anda belum menyimpan atau membuat berkas CV di platform ini.</p>
                        <a href="{{ route('cv.create') }}" class="px-3.5 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-xs font-bold shadow-sm transition-colors cursor-pointer">
                            Buat CV Sekarang
                        </a>
                    </div>
                @else
                    <div class="space-y-5">
                        <div class="p-4 border border-slate-200 rounded-lg bg-slate-50 flex flex-col sm:flex-row justify-between sm:items-center gap-3">
                            <div class="truncate">
                                <h4 class="font-bold text-slate-800 text-xs truncate" title="{{ $latestCv->title }}">{{ $latestCv->title }}</h4>
                                <p class="text-[9px] text-slate-400 mt-1 flex items-center gap-1 font-semibold">
                                    <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
                                    <span>Diperbarui: {{ $latestCv->updated_at->format('d M Y H:i') }}</span>
                                </p>
                            </div>
                            <div class="flex gap-2 shrink-0">
                                <a href="{{ route('cv.show', $latestCv->id) }}" target="_blank" class="px-2.5 py-1.5 bg-white border border-slate-200 hover:bg-indigo-50 hover:text-indigo-650 hover:border-indigo-200 rounded-md text-[10px] font-bold transition-colors flex items-center gap-1">
                                    <i data-lucide="eye" class="w-3.5 h-3.5"></i> <span>Preview</span>
                                </a>
                                <a href="{{ route('cv.edit', $latestCv->id) }}" class="px-2.5 py-1.5 bg-white border border-slate-200 hover:bg-amber-50 hover:text-amber-750 hover:border-amber-200 rounded-md text-[10px] font-bold transition-colors flex items-center gap-1">
                                    <i data-lucide="edit-3" class="w-3.5 h-3.5"></i> <span>Edit</span>
                                </a>
                            </div>
                        </div>

                        <!-- Snippet details mapping -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-xs pt-2">
                            <div class="space-y-2">
                                <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px] block">Ringkasan Profil Karir</span>
                                <p class="text-slate-600 leading-relaxed text-justify text-xs line-clamp-4">
                                    {{ $latestCv->content['contact']['summary'] ?? 'Ringkasan karir belum diisi.' }}
                                </p>
                            </div>
                            <div class="space-y-3.5">
                                <div class="flex flex-col gap-0.5">
                                    <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px]">Hubungan Kontak</span>
                                    <span class="font-semibold text-slate-800 text-xs">{{ $latestCv->content['contact']['email'] ?? '-' }} &bull; {{ $latestCv->content['contact']['phone'] ?? '-' }}</span>
                                </div>
                                <div class="flex flex-col gap-1.5">
                                    <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px]">Keahlian Terdaftar</span>
                                    <div class="flex flex-wrap gap-1 mt-0.5">
                                        @forelse(array_slice($latestCv->content['skills'] ?? [], 0, 8) as $skill)
                                            <span class="bg-slate-100 text-slate-700 px-2 py-0.5 rounded-md text-[10px] font-semibold border border-slate-200/50">{{ $skill }}</span>
                                        @empty
                                            <span class="text-slate-400 italic">Belum ada skill yang ditambahkan.</span>
                                        @forelseend
                                        @if(count($latestCv->content['skills'] ?? []) > 8)
                                            <span class="bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded-md text-[10px] font-bold">+{{ count($latestCv->content['skills'] ?? []) - 8 }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Bento 2: Riwayat CV List -->
            <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-6">
                <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider mb-4 flex items-center gap-2 border-b border-slate-100 pb-3">
                    <i data-lucide="history" class="text-indigo-650 w-4 h-4"></i>
                    <span>Riwayat Pembuatan CV Lengkap</span>
                </h3>

                @if($cvs->isEmpty())
                    <div class="py-8 text-center text-slate-400 text-xs font-semibold">Belum ada riwayat pendaftaran CV.</div>
                @else
                    <div class="space-y-2.5 max-h-[300px] overflow-y-auto pr-1">
                        @foreach($cvs as $cv)
                            <div class="flex justify-between items-center p-3 border border-slate-200 hover:border-indigo-200 rounded-lg bg-slate-50 hover:bg-white transition-all text-xs">
                                <div class="truncate max-w-[70%]">
                                    <h4 class="font-bold text-slate-800 truncate text-xs" title="{{ $cv->title }}">{{ $cv->title }}</h4>
                                    <span class="text-[9px] text-slate-400 mt-0.5 block font-semibold">Diperbarui: {{ $cv->updated_at->format('d/m/Y H:i') }}</span>
                                </div>
                                <div class="flex gap-1.5 shrink-0">
                                    <a href="{{ route('cv.show', $cv->id) }}" target="_blank" class="p-1.5 bg-white hover:bg-indigo-50 border border-slate-200 hover:border-indigo-200 text-slate-500 hover:text-indigo-600 rounded-md transition-colors cursor-pointer" title="Cetak PDF">
                                        <i data-lucide="printer" class="w-4 h-4"></i>
                                    </a>
                                    <button onclick="deleteCv({{ $cv->id }}, '{{ $cv->title }}')" class="p-1.5 bg-white hover:bg-red-50 border border-slate-200 hover:border-red-200 text-slate-500 hover:text-red-650 rounded-md transition-colors cursor-pointer" title="Hapus">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

        </div>

        <!-- Column Right (Account & Profile Details) -->
        <div class="space-y-6">
            
            <!-- Bento 3: Account Info -->
            <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-6">
                <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider mb-5 flex items-center gap-2 border-b border-slate-100 pb-3">
                    <i data-lucide="id-card" class="text-indigo-650 w-4 h-4"></i>
                    <span>Informasi Akun Utama</span>
                </h3>

                <div class="space-y-5 text-xs">
                    <div class="flex items-center gap-3 bg-slate-50 p-3 rounded-lg border border-slate-200">
                        <div class="w-10 h-10 rounded-full bg-indigo-650 flex items-center justify-center font-bold text-white text-sm shadow-sm">
                            {{ substr(Auth::user()->name, 0, 1) }}
                        </div>
                        <div class="truncate">
                            <h4 class="font-bold text-slate-800 truncate leading-snug">{{ Auth::user()->name }}</h4>
                            <p class="text-[9px] text-slate-400 truncate font-semibold">Bergabung: {{ Auth::user()->created_at->format('d/m/Y') }}</p>
                        </div>
                    </div>

                    <div class="space-y-3.5 pt-1.5">
                        <div class="flex flex-col gap-0.5 border-b border-slate-100 pb-2.5">
                            <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px]">Alamat Surat Elektronik</span>
                            <span class="font-semibold text-slate-850 text-xs">{{ Auth::user()->email }}</span>
                        </div>
                        <div class="flex flex-col gap-0.5 border-b border-slate-100 pb-2.5">
                            <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px]">Nomor WhatsApp</span>
                            <span class="font-semibold text-slate-850 text-xs">+{{ Auth::user()->whatsapp }}</span>
                        </div>
                        <div class="flex flex-col gap-1.5">
                            <span class="text-slate-400 font-bold uppercase tracking-wider text-[9px]">Status Verifikasi</span>
                            @if(Auth::user()->whatsapp_verified_at)
                                <span class="inline-flex w-fit bg-emerald-50 text-emerald-700 px-2.5 py-0.5 rounded-md font-extrabold items-center gap-1 text-[9px] border border-emerald-100">
                                    <i data-lucide="check-circle-2" class="w-3 h-3"></i> Terverifikasi
                                </span>
                            @else
                                <div class="flex flex-col gap-2">
                                    <span class="inline-flex w-fit bg-amber-50 text-amber-700 px-2.5 py-0.5 rounded-md font-extrabold items-center gap-1 text-[9px] border border-amber-100">
                                        <i data-lucide="alert-circle" class="w-3 h-3"></i> Belum Verifikasi
                                    </span>
                                    <a href="{{ route('auth.verify') }}" class="w-full py-1.5 bg-indigo-600 hover:bg-indigo-750 text-white rounded-md font-bold text-center tracking-wide transition-colors">
                                        Lakukan Verifikasi OTP
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bento 4: Short stats -->
            <div class="bg-white border border-slate-200 shadow-sm rounded-xl p-5">
                <div class="flex justify-between items-center text-xs font-bold text-slate-500">
                    <span>JUMLAH DOKUMEN AKTIF:</span>
                    <span class="bg-indigo-50 text-indigo-650 px-2.5 py-0.5 rounded-md font-extrabold text-xs border border-indigo-100">{{ count($cvs) }} CV</span>
                </div>
            </div>

        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
    // Delete CV Handler
    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