@extends('layouts.app')

@section('title', 'Dashboard Pelamar - ' . ($siteName ?? 'Bursa Kerja'))

@section('content')
<div class="max-w-6xl mx-auto px-4 py-8">
    {{-- Welcome --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6 animate-fade-in-up">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">Halo, {{ $applicant->name }}!</h1>
                <p class="text-gray-500 mt-1">Kelola semua lamaran pekerjaan Anda di sini</p>
            </div>
            <a href="{{ route('home') }}" class="bg-indigo-50 text-indigo-600 px-5 py-2.5 rounded-lg font-medium hover:outline hover:outline-2 hover:outline-indigo-300 text-sm">
                + Lamar Lowongan Baru
            </a>
        </div>
    </div>

    {{-- Profile Completion Notice --}}
    @php
        $profileIncomplete = !$applicant->birth_date || !$applicant->gender || !$applicant->province || !$applicant->city;
    @endphp
    @if($profileIncomplete)
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-5 mb-6 flex items-start space-x-3">
        <svg class="w-6 h-6 text-blue-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        <div>
            <p class="text-blue-800 font-medium">Lengkapi profil Anda untuk meningkatkan peluang diterima kerja oleh perusahaan pilihan Anda</p>
            <a href="{{ route('profile.edit') }}" class="inline-block mt-2 text-sm text-blue-600 font-semibold hover:underline">Lengkapi Profil Sekarang →</a>
        </div>
    </div>
    @endif

    {{-- Generated Password Notice --}}
    @if($generatedPassword ?? null)
    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-6 mb-6">
        <h3 class="font-semibold text-yellow-800 mb-2">Simpan Password Anda!</h3>
        <p class="text-yellow-700 mb-2">Password Anda yang digenerate otomatis:</p>
        <div class="bg-white border border-yellow-300 rounded-lg px-4 py-3 font-mono text-lg text-center select-all">
            {{ $generatedPassword }}
        </div>
        <p class="text-yellow-600 text-sm mt-2">Catat password ini! Anda akan membutuhkannya untuk login kembali.</p>
    </div>
    @endif

    {{-- Ad --}}
    @if($bannerTop)
    <div class="ad-container mb-6">
        <div class="ad-label">IKLAN</div>
        <div class="ad-content">{!! $bannerTop->code !!}</div>
    </div>
    @endif

    {{-- Profile Card --}}
    <div class="bg-white rounded-xl border border-gray-100 p-6 mb-6 animate-fade-in-up" style="animation-delay: 0.1s">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-4 gap-3">
            <h2 class="text-lg font-semibold text-gray-800">Data Diri</h2>
            <div class="flex items-center space-x-3 flex-wrap gap-y-2">
                <a href="{{ route('profile.edit') }}" class="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    Edit Profil
                </a>
                <a href="{{ route('password.change.form') }}" class="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800 font-medium">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
                    Ubah Password
                </a>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <span class="text-sm text-gray-500">Nama Lengkap</span>
                <p class="font-medium text-gray-800">{{ $applicant->name }}</p>
            </div>
            <div>
                <span class="text-sm text-gray-500">Email</span>
                <p class="font-medium text-gray-800">{{ $applicant->email }}</p>
            </div>
            <div>
                <span class="text-sm text-gray-500">WhatsApp</span>
                <p class="font-medium text-gray-800">{{ $applicant->whatsapp }}</p>
            </div>
            <div>
                <span class="text-sm text-gray-500">Pendidikan Terakhir</span>
                <p class="font-medium text-gray-800">{{ $applicant->education }}</p>
            </div>
            <div>
                <span class="text-sm text-gray-500">Tanggal Lahir</span>
                <p class="font-medium text-gray-800">{{ $applicant->birth_date ? $applicant->birth_date->format('d M Y') : '-' }}</p>
            </div>
            <div>
                <span class="text-sm text-gray-500">Jenis Kelamin</span>
                <p class="font-medium text-gray-800">{{ $applicant->gender ?? '-' }}</p>
            </div>
            <div>
                <span class="text-sm text-gray-500">Provinsi</span>
                <p class="font-medium text-gray-800">{{ $applicant->province ?? '-' }}</p>
            </div>
            <div>
                <span class="text-sm text-gray-500">Kota / Kabupaten</span>
                <p class="font-medium text-gray-800">{{ $applicant->city ?? '-' }}</p>
            </div>
        </div>
    </div>

    {{-- Ad between profile and applications --}}
    @if($inArticleAd ?? false)
    <div class="ad-container mb-6">
        <div class="ad-label">IKLAN</div>
        <div class="ad-content">{!! $inArticleAd->code !!}</div>
    </div>
    @endif

    {{-- Applications --}}
    <h2 class="text-lg font-semibold text-gray-800 mb-4">Lamaran Saya</h2>

    @if($applications->count() > 0)
    <div class="space-y-4">
        @foreach($applications as $app)
        @php
            $nextFormStage = $app->getNextFormStage();
        @endphp
        <div class="bg-white rounded-xl border border-gray-100 p-6 app-card">
            <div class="flex items-start justify-between flex-wrap gap-4">
                <div class="flex-1">
                    <div class="flex items-center space-x-3 mb-2 flex-wrap gap-2">
                        @if($app->jobListing->company_logo)
                        <img src="{{ asset('storage/' . $app->jobListing->company_logo) }}" class="w-8 h-8 object-contain rounded">
                        @endif
                        <h3 class="text-lg font-semibold text-gray-800">{{ $app->jobListing->title }}</h3>
                        <span class="inline-block px-3 py-1 text-xs font-medium rounded-full
                            {{ $app->status === 'pending' ? 'badge-pulse' : '' }}
                            {{ $app->status_badge_class }}">
                            {{ $app->status_label }}
                        </span>
                    </div>
                    <p class="text-indigo-600 font-medium text-sm">{{ $app->jobListing->company }}</p>
                    <p class="text-gray-400 text-sm mt-1">Dilamar: {{ $app->applied_at->format('d M Y H:i') }}</p>

                    @if(count($app->document_paths) > 0)
                    <div class="flex flex-wrap gap-2 mt-1">
                        @foreach($app->document_paths as $i => $docPath)
                        <a href="{{ asset('storage/' . $docPath) }}" target="_blank" class="inline-flex items-center text-blue-500 text-xs hover:underline">
                            <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                            Dokumen {{ $i + 1 }}
                        </a>
                        @endforeach
                    </div>
                    @endif
                </div>


            </div>

            {{-- Status Info --}}
            <div class="mt-4 pt-4 border-t border-gray-50">
                @if($app->status === 'accepted')
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4 text-center">
                        <p class="text-green-700 font-semibold text-lg">Selamat! Anda DITERIMA!</p>
                    </div>
                @elseif($app->status === 'rejected')
                    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                        <p class="text-red-700 font-medium mb-2">Maaf, Anda belum berhasil lolos pada seleksi ini.</p>
                        <a href="{{ route('home') }}" class="text-indigo-600 font-medium hover:underline text-sm">
                            Lihat Lowongan Lainnya →
                        </a>
                    </div>
                @else
                    @if($nextFormStage)
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                            <div>
                                <p class="text-yellow-800 font-medium">Selamat! Anda lolos seleksi tahap sebelumnya</p>
                                <p class="text-yellow-700 text-sm mt-1">Silakan isi formulir <strong>{{ $nextFormStage->name }}</strong> untuk melanjutkan proses seleksi.</p>
                            </div>
                            <a href="{{ route('form.stage', [$app, $nextFormStage]) }}"
                               class="inline-flex items-center justify-center bg-indigo-600 text-white px-5 py-2.5 rounded-lg font-medium hover:outline hover:outline-2 hover:outline-indigo-800 text-sm whitespace-nowrap pulse-cta">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                Isi Formulir {{ $nextFormStage->name }}
                            </a>
                        </div>
                    </div>
                    @else
                    <p class="text-sm text-gray-400">Lamaran Anda sedang diproses...</p>
                    @endif
                @endif
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="bg-white rounded-xl border border-gray-100 p-12 text-center animate-fade-in">
        <h3 class="text-lg font-semibold text-gray-700 mb-2">Belum ada lamaran</h3>
        <p class="text-gray-500 mb-4">Anda belum melamar pekerjaan apapun</p>
        <a href="{{ route('home') }}" class="inline-block bg-indigo-600 text-white px-6 py-2.5 rounded-lg font-medium hover:outline hover:outline-2 hover:outline-indigo-800">
            Lihat Lowongan
        </a>
    </div>
    @endif

    {{-- Native Ad --}}
    @if($nativeAd)
    <div class="ad-container mt-6">
        <div class="ad-label">Iklan</div>
        <div class="ad-content">{!! $nativeAd->code !!}</div>
    </div>
    @endif

    {{-- Mobile Banner --}}
    @if($mobileBanner ?? false)
    <div class="ad-container mt-6 ad-mobile">
        <div class="ad-label">Iklan</div>
        <div class="ad-content">{!! $mobileBanner->code !!}</div>
    </div>
    @endif
</div>
@endsection