@extends('layouts.admin')

@section('title', 'Detail Pelamar')
@section('page-title', 'Detail Pelamar')
@section('page-subtitle', $applicant->full_name)

@section('content')
<div style="margin-bottom: 1rem; display: flex; gap: 0.5rem;">
    <a href="{{ route('admin.applicants.index') }}" class="btn btn-secondary btn-sm"><i class="fas fa-arrow-left"></i> Kembali</a>
    <a href="{{ route('admin.applicants.edit', $applicant) }}" class="btn btn-primary btn-sm"><i class="fas fa-pen"></i> Ubah Status</a>
    <a href="{{ route('admin.applicants.export-single', $applicant) }}" class="btn btn-success btn-sm" style="background-color: #10B981; border-color: #10B981; color: white;"><i class="fas fa-file-excel"></i> Download Excel</a>
</div>

{{-- Status Banner --}}
<div class="card" style="padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border-left: 4px solid #2E7D32;">
    <div>
        <div style="font-size: 1.15rem; font-weight: 800; color: #111827; margin-bottom: 4px;">{{ $applicant->full_name }}</div>
        <span style="font-size: 0.82rem; color: var(--text-muted);">NIK: {{ $applicant->nik }} · Lowongan: <strong style="color: var(--text-primary);">{{ $applicant->vacancy->title ?? '-' }}</strong> @if(!empty($applicant->vacancy->department)) ({{ $applicant->vacancy->department }}) @endif</span>
    </div>
    <div style="text-align: right;">
        <div style="margin-bottom: 4px;">
            @switch($applicant->status)
                @case('TERKIRIM') <span class="badge badge-warning" style="font-size: 0.88rem; padding: 0.4rem 1rem;">⏳ Terkirim</span> @break
                @case('PROSES') <span class="badge badge-info" style="font-size: 0.88rem; padding: 0.4rem 1rem;">🔄 Dalam Proses</span> @break
                @case('DITERIMA') <span class="badge badge-success" style="font-size: 0.88rem; padding: 0.4rem 1rem;">✅ Diterima</span> @break
                @case('DITOLAK') <span class="badge badge-danger" style="font-size: 0.88rem; padding: 0.4rem 1rem;">❌ Ditolak</span> @break
                @default <span class="badge badge-secondary">{{ $applicant->status }}</span>
            @endswitch
        </div>
        <span style="font-size: 0.78rem; color: var(--text-muted);">{{ $applicant->created_at->format('d M Y, H:i') }}</span>
    </div>
</div>

{{-- ========== STEP 1: IDENTITAS DIRI ========== --}}
<div class="detail-section">
    <div class="detail-section-header" style="background: #059669;">
        <span class="detail-section-number">1</span>
        <div>
            <div class="detail-section-title">Identitas Diri</div>
            <div class="detail-section-subtitle">Data pribadi pelamar</div>
        </div>
    </div>
    <div class="detail-section-body">
        <div class="info-grid">
            <div class="info-item"><div class="info-label">Nama Lengkap</div><div class="info-value bold">{{ $applicant->full_name }}</div></div>
            <div class="info-item"><div class="info-label">Jenis Kelamin</div><div class="info-value">{{ $applicant->gender ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Golongan Darah</div><div class="info-value">{{ $applicant->other_data['blood_type'] ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Tempat Lahir</div><div class="info-value">{{ $applicant->birth_place ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Tanggal Lahir</div><div class="info-value">{{ $applicant->birth_date ? $applicant->birth_date->format('d M Y') : '-' }}</div></div>
            <div class="info-item"><div class="info-label">Agama</div><div class="info-value">{{ $applicant->religion ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Tinggi Badan</div><div class="info-value">{{ $applicant->height ? $applicant->height . ' cm' : '-' }}</div></div>
            <div class="info-item"><div class="info-label">Berat Badan</div><div class="info-value">{{ $applicant->weight ? $applicant->weight . ' kg' : '-' }}</div></div>
        </div>
        <div class="info-divider"></div>
        <div class="info-grid">
            <div class="info-item full"><div class="info-label">Alamat Sesuai KTP</div><div class="info-value">{{ $applicant->address ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Kota / Kabupaten</div><div class="info-value">{{ $applicant->city ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Provinsi</div><div class="info-value">{{ $applicant->province ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Kode Pos</div><div class="info-value">{{ $applicant->postal_code ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Email</div><div class="info-value">{{ $applicant->email ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">No Handphone</div><div class="info-value bold">{{ $applicant->phone ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Nomor KK</div><div class="info-value">{{ $applicant->other_data['no_kk'] ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Nomor KTP</div><div class="info-value">{{ $applicant->nik ?? '-' }}</div></div>
            <div class="info-item full"><div class="info-label">Alamat Tinggal Saat Ini</div><div class="info-value">{{ $applicant->other_data['current_address'] ?? $applicant->address ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">No Telepon Rumah/Kerabat</div><div class="info-value">{{ $applicant->other_data['home_phone'] ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Tempat Tinggal Milik</div><div class="info-value">{{ $applicant->other_data['residence_owner'] ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Status Pernikahan</div><div class="info-value">{{ $applicant->other_data['marital_status'] ?? '-' }}</div></div>
            <div class="info-item"><div class="info-label">Sejak Tanggal</div><div class="info-value">{{ $applicant->other_data['marital_date'] ?? '-' }}</div></div>
        </div>
    </div>
</div>

{{-- ========== STEP 2: IDENTITAS KELUARGA ========== --}}
<div class="detail-section">
    <div class="detail-section-header" style="background: #F59E0B;">
        <span class="detail-section-number">2</span>
        <div>
            <div class="detail-section-title">Identitas Keluarga</div>
            <div class="detail-section-subtitle">Susunan keluarga pelamar</div>
        </div>
    </div>
    <div class="detail-section-body">
        @if(!empty($applicant->family_data) && is_array($applicant->family_data))
        <div style="overflow-x: auto;">
            <table class="detail-table">
                <thead>
                    <tr>
                        <th style="width: 120px;">Keluarga</th>
                        <th>Nama</th>
                        <th style="width: 50px;">L/P</th>
                        <th>Tempat / Tgl Lahir</th>
                        <th>Pendidikan</th>
                        <th>Pekerjaan</th>
                        <th>No Telepon</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($applicant->family_data as $member)
                    @if(!empty($member['name']))
                    <tr>
                        <td class="bold">{{ $member['relationship'] ?? '-' }}</td>
                        <td>{{ $member['name'] ?? '-' }}</td>
                        <td style="text-align: center;">{{ $member['gender'] ?? '-' }}</td>
                        <td>{{ $member['birth_place_date'] ?? ($member['age'] ?? '-') }}</td>
                        <td>{{ $member['education'] ?? '-' }}</td>
                        <td>{{ $member['occupation'] ?? '-' }}</td>
                        <td>{{ $member['phone'] ?? '-' }}</td>
                    </tr>
                    @endif
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
            <p class="empty-msg"><i class="fas fa-info-circle"></i> Tidak ada data keluarga.</p>
        @endif
    </div>
</div>

{{-- ========== STEP 3: RIWAYAT PENDIDIKAN ========== --}}
<div class="detail-section">
    <div class="detail-section-header" style="background: #3B82F6;">
        <span class="detail-section-number">3</span>
        <div>
            <div class="detail-section-title">Riwayat Pendidikan</div>
            <div class="detail-section-subtitle">Pendidikan formal & non formal</div>
        </div>
    </div>
    <div class="detail-section-body">
        <div class="sub-section-label"><i class="fas fa-school"></i> Pendidikan Formal</div>
        @if(!empty($applicant->education_data) && is_array($applicant->education_data))
        <div style="overflow-x: auto;">
            <table class="detail-table">
                <thead>
                    <tr>
                        <th style="width: 90px;">Tingkat</th>
                        <th>Nama Sekolah</th>
                        <th>Jurusan</th>
                        <th>Tempat</th>
                        <th style="width: 100px;">Dari</th>
                        <th style="width: 100px;">Sampai</th>
                        <th style="width: 80px;">Lulus</th>
                        <th style="width: 60px;">IPK</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($applicant->education_data as $ed)
                    <tr>
                        <td class="bold">{{ $ed['level'] ?? $ed['degree'] ?? '-' }}</td>
                        <td>{{ $ed['institution'] ?? '-' }}</td>
                        <td>{{ $ed['major'] ?? '-' }}</td>
                        <td>{{ $ed['location'] ?? '-' }}</td>
                        <td>{{ $ed['year_start'] ?? '-' }}</td>
                        <td>{{ $ed['year_end'] ?? $ed['year'] ?? '-' }}</td>
                        <td>
                            @if(($ed['graduated'] ?? '') == 'Lulus')
                                <span class="badge badge-success">Lulus</span>
                            @else
                                {{ $ed['graduated'] ?? '-' }}
                            @endif
                        </td>
                        <td class="bold">{{ $ed['gpa'] ?? '-' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
            <p class="empty-msg"><i class="fas fa-info-circle"></i> Tidak ada data pendidikan.</p>
        @endif
    </div>
</div>

{{-- ========== STEP 4: RIWAYAT PEKERJAAN ========== --}}
<div class="detail-section">
    <div class="detail-section-header" style="background: #8B5CF6;">
        <span class="detail-section-number">4</span>
        <div>
            <div class="detail-section-title">Riwayat Pekerjaan</div>
            <div class="detail-section-subtitle">Pengalaman kerja sebelumnya</div>
        </div>
    </div>
    <div class="detail-section-body">
        @if(!empty($applicant->experience_data) && is_array($applicant->experience_data))
            @foreach($applicant->experience_data as $i => $exp)
            <div class="work-block">
                <div class="work-block-header">
                    <span class="work-block-num">{{ $i + 1 }}</span>
                    <strong>Pekerjaan Ke-{{ $i + 1 }}</strong>
                </div>
                <div class="info-grid" style="padding: 1rem;">
                    <div class="info-item full">
                        <div class="info-label">Nama & Alamat Perusahaan</div>
                        <div class="info-value bold">{!! nl2br(e($exp['company'] ?? '-')) !!}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Jabatan</div>
                        <div class="info-value">{{ is_array($exp['positions'] ?? null) ? implode(', ', array_filter($exp['positions'])) : ($exp['position'] ?? '-') }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Periode</div>
                        <div class="info-value">{{ is_array($exp['periods'] ?? null) ? implode(', ', array_filter($exp['periods'])) : ($exp['duration'] ?? '-') }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Gaji Akhir</div>
                        <div class="info-value">{{ is_array($exp['salaries'] ?? null) ? implode(', ', array_filter($exp['salaries'])) : ($exp['salary'] ?? '-') }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">Jumlah Bawahan</div>
                        <div class="info-value">{{ is_array($exp['subordinates'] ?? null) ? implode(', ', array_filter($exp['subordinates'])) : '-' }}</div>
                    </div>
                    <div class="info-item full">
                        <div class="info-label">Alasan Berhenti</div>
                        <div class="info-value">{{ $exp['reason_leave'] ?? '-' }}</div>
                    </div>
                    <div class="info-item full">
                        <div class="info-label">Uraian Tugas dan Tanggung Jawab</div>
                        <div class="info-value" style="background: #f9fafb; padding: 0.65rem 0.85rem; border-radius: 8px; margin-top: 4px; line-height: 1.6;">{{ $exp['responsibilities'] ?? $exp['description'] ?? '-' }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        @else
            <p class="empty-msg"><i class="fas fa-info-circle"></i> Tidak ada pengalaman kerja.</p>
        @endif
    </div>
</div>

{{-- ========== STEP 5: LAIN-LAIN ========== --}}
@php $other = is_array($applicant->other_data) ? $applicant->other_data : []; @endphp
<div class="detail-section">
    <div class="detail-section-header" style="background: #EF4444;">
        <span class="detail-section-number">5</span>
        <div>
            <div class="detail-section-title">Lain-lain</div>
            <div class="detail-section-subtitle">Aktivitas sosial, referensi, kontak darurat</div>
        </div>
    </div>
    <div class="detail-section-body">
        {{-- Aktivitas Sosial --}}
        <div class="sub-section-label"><i class="fas fa-users-cog"></i> Aktivitas Sosial & Organisasi</div>
        @if(!empty($other['social_activities']))
        <div style="overflow-x: auto;">
            <table class="detail-table">
                <thead><tr><th>Nama Organisasi</th><th>Jenis Kegiatan</th><th>Jabatan</th><th style="width: 100px;">Tahun</th></tr></thead>
                <tbody>
                    @foreach($other['social_activities'] as $sa)
                    <tr>
                        <td class="bold">{{ $sa['organization'] ?? '-' }}</td>
                        <td>{{ $sa['activity'] ?? '-' }}</td>
                        <td>{{ $sa['position'] ?? '-' }}</td>
                        <td>{{ $sa['year'] ?? '-' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
            <p class="empty-msg"><i class="fas fa-info-circle"></i> Tidak ada data organisasi.</p>
        @endif

        <div class="info-highlight" style="margin-top: 1rem;">
            <i class="fas fa-heart" style="color: #EF4444;"></i>
            <div><strong>Hobby & Kegiatan Waktu Luang:</strong><br>{{ $other['hobbies'] ?? '-' }}</div>
        </div>

        {{-- Referensi --}}
        <div class="sub-section-label" style="margin-top: 1.75rem;"><i class="fas fa-address-book"></i> Referensi</div>
        @if(!empty($other['references']))
        <div style="overflow-x: auto;">
            <table class="detail-table">
                <thead><tr><th>Nama</th><th>Alamat & No Telepon</th><th>Jabatan</th><th>Hubungan</th></tr></thead>
                <tbody>
                    @foreach($other['references'] as $ref)
                    <tr>
                        <td class="bold">{{ $ref['name'] ?? '-' }}</td>
                        <td>{{ $ref['address_phone'] ?? '-' }}</td>
                        <td>{{ $ref['position'] ?? '-' }}</td>
                        <td>{{ $ref['relationship'] ?? '-' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        {{-- Kontak Darurat --}}
        <div class="sub-section-label" style="margin-top: 1.75rem;"><i class="fas fa-phone-alt"></i> Kontak Darurat</div>
        @if(!empty($other['emergency_contacts']))
        <div style="overflow-x: auto;">
            <table class="detail-table">
                <thead><tr><th>Nama</th><th>Alamat</th><th>No Telepon</th><th>Hubungan</th></tr></thead>
                <tbody>
                    @foreach($other['emergency_contacts'] as $ec)
                    <tr>
                        <td class="bold">{{ $ec['name'] ?? '-' }}</td>
                        <td>{{ $ec['address'] ?? '-' }}</td>
                        <td>{{ $ec['phone'] ?? '-' }}</td>
                        <td>{{ $ec['relationship'] ?? '-' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif

        {{-- Pertanyaan --}}
        <div class="sub-section-label" style="margin-top: 1.75rem;"><i class="fas fa-question-circle"></i> Pertanyaan Lain-lain</div>
        @if(!empty($other['questions']))
        <div style="overflow-x: auto;">
            <table class="detail-table">
                <thead><tr><th>Pertanyaan</th><th style="width: 80px; text-align: center;">YA</th><th style="width: 80px; text-align: center;">TIDAK</th><th>Keterangan</th></tr></thead>
                <tbody>
                    @foreach($other['questions'] as $q)
                    <tr>
                        <td>{{ $q['question'] ?? '-' }}</td>
                        <td style="text-align: center;">@if(($q['answer'] ?? '') == 'ya') <i class="fas fa-check-circle" style="color: #10B981; font-size: 1.1rem;"></i> @endif</td>
                        <td style="text-align: center;">@if(($q['answer'] ?? '') == 'tidak') <i class="fas fa-check-circle" style="color: #EF4444; font-size: 1.1rem;"></i> @endif</td>
                        <td>{{ $q['note'] ?? '-' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
    </div>
</div>

{{-- ========== STEP 6: DOKUMEN ========== --}}
<div class="detail-section">
    <div class="detail-section-header" style="background: #0284C7;">
        <span class="detail-section-number">6</span>
        <div>
            <div class="detail-section-title">Dokumen Lampiran</div>
            <div class="detail-section-subtitle">File dokumen yang diupload pelamar</div>
        </div>
    </div>
    <div class="detail-section-body">
        @if(!empty($applicant->documents) && is_array($applicant->documents))
        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem;">
            @php $docIcons = ['kartu_keluarga'=>'fa-id-card','ktp'=>'fa-address-card','ijazah_terakhir'=>'fa-certificate','surat_lamaran'=>'fa-envelope-open-text','npwp'=>'fa-receipt','buku_rekening_bni'=>'fa-university','foto_3x4'=>'fa-camera']; @endphp
            @foreach($applicant->documents as $key => $path)
            <a href="{{ route('admin.file', ['path' => $path]) }}" target="_blank" class="doc-card">
                <div class="doc-card-icon">
                    <i class="fas {{ $docIcons[$key] ?? 'fa-file' }}"></i>
                </div>
                <div class="doc-card-info">
                    @php 
                        $docName = ucwords(str_replace('_', ' ', $key));
                        if (is_numeric($key)) {
                            $docName = "Dokumen " . ((int)$key + 1);
                        }
                    @endphp
                    <div class="doc-card-name">{{ $docName }}</div>
                    <div class="doc-card-action"><i class="fas fa-download"></i> Unduh / Lihat</div>
                </div>
            </a>
            @endforeach
        </div>
        @else
            <p class="empty-msg"><i class="fas fa-info-circle"></i> Belum ada dokumen.</p>
        @endif
    </div>
</div>

<style>
    /* Section blocks */
    .detail-section { margin-bottom: 1.5rem; border-radius: 16px; overflow: hidden; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); }
    .detail-section-header { padding: 1rem 1.5rem; display: flex; align-items: center; gap: 14px; color: white; }
    .detail-section-number { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex-shrink: 0; }
    .detail-section-title { font-size: 1.05rem; font-weight: 700; }
    .detail-section-subtitle { font-size: 0.78rem; opacity: 0.85; }
    .detail-section-body { padding: 1.5rem; }

    /* Sub-section label */
    .sub-section-label { font-size: 0.85rem; font-weight: 700; color: #374151; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid #E5E7EB; display: flex; align-items: center; gap: 8px; }
    .sub-section-label i { color: #6B7280; }

    /* Info grid */
    .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .info-item { padding: 0.6rem 0.5rem; border-bottom: 1px solid #f3f4f6; }
    .info-item.full { grid-column: 1 / -1; }
    .info-label { font-size: 0.72rem; font-weight: 700; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; }
    .info-value { font-size: 0.9rem; color: #111827; }
    .info-value.bold, .bold { font-weight: 700; }
    .info-divider { height: 1px; background: linear-gradient(to right, #E5E7EB, transparent); margin: 0.5rem 0; }

    /* Info highlight box */
    .info-highlight { display: flex; align-items: flex-start; gap: 10px; padding: 0.85rem 1rem; background: #fafafa; border-radius: 10px; border: 1px solid #f3f4f6; font-size: 0.88rem; }

    /* Detail table */
    .detail-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    .detail-table th { background: #F8FAFC; padding: 0.65rem 0.85rem; text-align: left; font-size: 0.72rem; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #E2E8F0; }
    .detail-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid #F1F5F9; color: #334155; }
    .detail-table tbody tr:nth-child(even) { background: #F8FAFC; }
    .detail-table tbody tr:hover { background: #F0FDF4; }

    /* Work block */
    .work-block { border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
    .work-block-header { padding: 0.65rem 1rem; background: #F8FAFC; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
    .work-block-num { width: 26px; height: 26px; border-radius: 7px; background: #8B5CF6; color: white; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; }

    /* Document cards */
    .doc-card { text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid #E5E7EB; transition: all 0.2s; background: white; }
    .doc-card:hover { border-color: #2E7D32; box-shadow: 0 4px 16px rgba(46,125,50,0.12); transform: translateY(-2px); }
    .doc-card-icon { width: 44px; height: 44px; border-radius: 10px; background: #ECFDF5; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #059669; flex-shrink: 0; }
    .doc-card-name { font-weight: 700; font-size: 0.85rem; color: #111827; }
    .doc-card-action { font-size: 0.72rem; color: #2E7D32; margin-top: 2px; }

    .empty-msg { color: #9CA3AF; font-size: 0.88rem; font-style: italic; display: flex; align-items: center; gap: 6px; }

    @media (max-width: 768px) {
        .info-grid { grid-template-columns: 1fr !important; }
        .doc-card { flex-direction: column; text-align: center; }
    }
</style>
@endsection
