@extends('frontend.layouts.main')
@section('title', $job->title . ' — ' . $job->company_name)

@push('styles')
<style>
.jd-hero {
    background: var(--c-navy); padding: 56px 0;
    position: relative; overflow: hidden;
}
.jd-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 70% at 80% 40%, rgba(37,99,235,.2), transparent);
}
.jd-hero-inner { position: relative; z-index: 1; }
.jd-company-logo {
    width: 72px; height: 72px; border-radius: 16px;
    background: var(--white); display: flex; align-items: center; justify-content: center;
    font-family: var(--ff-display); font-size: 1.5rem; font-weight: 800; color: var(--c-blue);
    box-shadow: 0 4px 16px rgba(0,0,0,.2); flex-shrink: 0;
}
.jd-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: #fff; margin-bottom: 6px; }
.jd-company { font-size: 15px; color: rgba(255,255,255,.7); margin-bottom: 16px; }
.jd-meta-strip {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.jd-meta-item {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600;
    padding: 6px 12px; border-radius: 100px;
}
.jd-meta-item i { font-size: 10px; color: rgba(255,255,255,.55); }
/* Content */
.jd-content { padding: 48px 0 72px; }
.jd-section-card {
    background: var(--white); border: 1px solid var(--c-200);
    border-radius: 16px; padding: 28px; margin-bottom: 20px;
}
.jd-section-title {
    font-size: 15px; font-weight: 800; color: var(--c-900);
    margin-bottom: 16px; display: flex; align-items: center; gap: 9px;
    padding-bottom: 12px; border-bottom: 1px solid var(--c-100);
}
.jd-section-title i { font-size: 14px; color: var(--c-blue); }
.jd-req-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--c-100); font-size: 13.5px; color: var(--c-600);
}
.jd-req-item:last-child { border-bottom: none; }
.jd-req-item::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-blue); flex-shrink: 0; margin-top: 7px;
}
.jd-benefit-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; color: var(--c-700); padding: 6px 0;
}
.jd-benefit-item i { color: #16a34a; font-size: 12px; flex-shrink: 0; }
/* Sidebar */
.jd-apply-card {
    background: var(--white); border: 1px solid var(--c-200);
    border-radius: 16px; overflow: hidden;
}
.jd-sidebar-sticky {
    position: sticky;
    top: 76px;
}
.jd-apply-header { background: linear-gradient(135deg, var(--c-navy), #0c2040); padding: 24px; }
.jd-salary-big { font-family: var(--ff-display); font-size: 1.7rem; font-weight: 800; color: #fff; line-height: 1; }
.jd-salary-sublabel { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; }
.jd-apply-body { padding: 22px; }
.jd-info-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--c-100); font-size: 13.5px;
}
.jd-info-row:last-child { border-bottom: none; }
.jd-info-label { color: var(--c-500); display: flex; align-items: center; gap: 6px; }
.jd-info-label i { color: var(--c-400); font-size: 12px; }
.jd-info-val { font-weight: 700; color: var(--c-900); }
.deadline-indicator {
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.deadline-indicator i { color: #dc2626; font-size: 14px; flex-shrink: 0; }
.deadline-indicator span { font-size: 13px; color: #dc2626; font-weight: 600; }
/* Related */
.related-card {
    background: var(--white); border: 1px solid var(--c-200);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 12px;
    transition: all .2s; display: flex; gap: 12px; align-items: flex-start;
}
.related-card:hover { border-color: var(--c-blue-sm); box-shadow: var(--sh-md); transform: translateX(3px); }
.related-card-logo {
    width: 40px; height: 40px; background: var(--c-blue-xs); border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ff-display); font-size: .9rem; font-weight: 800; color: var(--c-blue);
    flex-shrink: 0;
}
</style>
@endpush

@section('content')

{{-- HERO --}}
<div class="jd-hero">
    <div class="container jd-hero-inner">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb" style="background:transparent;padding:0;margin:0;">
                <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}" style="color:rgba(255,255,255,.45);font-size:13px;">Beranda</a></li>
                <li class="breadcrumb-item"><a href="{{ route('frontend.jobs') }}" style="color:rgba(255,255,255,.45);font-size:13px;">Lowongan</a></li>
                <li class="breadcrumb-item active" style="color:rgba(255,255,255,.8);font-size:13px;">{{ Str::limit($job->title, 40) }}</li>
            </ol>
        </nav>
        <div class="d-flex align-items-start gap-4 flex-wrap">
            <div class="jd-company-logo">{{ substr($job->company_name, 0, 2) }}</div>
            <div class="flex-grow-1">
                <h1 class="jd-title">{{ $job->title }}</h1>
                <div class="jd-company">
                    <i class="fas fa-building me-2" style="color:rgba(255,255,255,.4);"></i>{{ $job->company_name }}
                </div>
                <div class="jd-meta-strip">
                    <span class="jd-meta-item"><i class="fas fa-map-marker-alt"></i>{{ $job->location }}</span>
                    <span class="jd-meta-item"><i class="fas fa-briefcase"></i>{{ $job->job_type }}</span>
                    <span class="jd-meta-item"><i class="fas fa-user-tie"></i>{{ $job->experience_level }}</span>
                    <span class="jd-meta-item"><i class="fas fa-tag"></i>{{ $job->category }}</span>
                    <span class="jd-meta-item"><i class="fas fa-eye"></i>{{ number_format($job->views) }} dilihat</span>
                    @if($job->is_featured)
                    <span class="jd-meta-item" style="background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.3);color:#fbbf24;">
                        <i class="fas fa-star"></i> Lowongan Unggulan
                    </span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- CONTENT --}}
<div class="jd-content">
    <div class="container">
        <div class="row g-4" style="align-items: flex-start;">

            {{-- Left --}}
            <div class="col-lg-8">

                {{-- Description --}}
                <div class="jd-section-card" data-aos="fade-up">
                    <div class="jd-section-title">
                        <i class="fas fa-file-alt"></i> Deskripsi Pekerjaan
                    </div>
                    <div style="font-size:14.5px;color:var(--c-600);line-height:1.85;">
                        {!! nl2br(e($job->description)) !!}
                    </div>
                </div>

                {{-- Requirements --}}
                <div class="jd-section-card" data-aos="fade-up">
                    <div class="jd-section-title">
                        <i class="fas fa-clipboard-list"></i> Kualifikasi & Persyaratan
                    </div>
                    @foreach(array_filter(explode("\n", $job->requirements)) as $req)
                    <div class="jd-req-item">{{ ltrim($req, '- ') }}</div>
                    @endforeach
                </div>

                {{-- Benefits --}}
                @if($job->benefits)
                <div class="jd-section-card" data-aos="fade-up">
                    <div class="jd-section-title">
                        <i class="fas fa-gift"></i> Keuntungan & Benefit
                    </div>
                    <div class="row g-2">
                        @foreach(array_filter(explode("\n", $job->benefits)) as $benefit)
                        <div class="col-md-6">
                            <div class="jd-benefit-item">
                                <i class="fas fa-check-circle"></i>
                                {{ ltrim($benefit, '- ') }}
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- Dokumen yang Diperlukan --}}
                <div class="jd-section-card" data-aos="fade-up">
                    <div class="jd-section-title">
                        <i class="fas fa-folder-open"></i> Dokumen yang Diperlukan
                    </div>
                    @php
                    $dokumen = [
                        ['fas fa-id-card',       'CV',              'Curriculum Vitae terbaru'],
                        ['fas fa-id-badge',      'KTP',             'Kartu Tanda Penduduk'],
                        ['fas fa-users',         'Kartu Keluarga',  'Kartu Keluarga (KK)'],
                        ['fas fa-graduation-cap','Ijazah',          'Ijazah terakhir yang dilegalisir'],
                        ['fas fa-book',          'Buku Nikah',      'Buku nikah / surat keterangan belum menikah'],
                        ['fas fa-baby',          'Akte Kelahiran',  'Akte kelahiran asli'],
                        ['fas fa-heartbeat',     'KIS/BPJS',        'Kartu Indonesia Sehat / BPJS Kesehatan'],
                        ['fas fa-passport',      'Paspor',          'Paspor aktif (min. 1 tahun masa berlaku)'],
                    ];
                    @endphp
                    <div class="row g-3">
                        @foreach($dokumen as $idx => $dok)
                        <div class="col-md-6">
                            <div style="display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--c-50);border:1px solid var(--c-200);border-radius:10px;transition:all .18s;"
                                 onmouseenter="this.style.borderColor='#0d9488';this.style.background='#f0fdfa'"
                                 onmouseleave="this.style.borderColor='var(--c-200)';this.style.background='var(--c-50)'">
                                <div style="width:36px;height:36px;border-radius:50%;background:#0d9488;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(13,148,136,.3);">
                                    <i class="{{ $dok[0] }}" style="color:#fff;font-size:13px;"></i>
                                </div>
                                <div>
                                    <div style="font-size:13.5px;font-weight:700;color:var(--c-900);line-height:1.2;">{{ $dok[1] }}</div>
                                    <div style="font-size:11.5px;color:var(--c-500);margin-top:1px;">{{ $dok[2] }}</div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div style="margin-top:16px;padding:12px 16px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;font-size:12.5px;color:#c2410c;">
                        <i class="fas fa-info-circle me-2"></i>
                        Semua dokumen disiapkan dalam bentuk <strong>fotokopi + asli</strong>. Paspor harus masih aktif minimal 1 tahun.
                    </div>
                </div>

                {{-- Tips Card --}}
                <div style="background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;border-radius:16px;padding:24px;" data-aos="fade-up">
                    <div style="font-size:14px;font-weight:800;color:var(--c-navy);margin-bottom:12px;">
                        <i class="fas fa-lightbulb me-2" style="color:var(--c-blue);"></i>Tips Melamar Pekerjaan Ini
                    </div>
                    <div class="row g-3">
                        @php $tips = [
                            ['fas fa-file-alt','Siapkan CV terbaru','Format PDF, maksimal 2 halaman, highlight pengalaman relevan.'],
                            ['fas fa-briefcase','Buat portofolio','Tampilkan project terbaik yang sesuai kategori pekerjaan ini.'],
                            ['fas fa-comments','Latihan wawancara','Pelajari profil perusahaan dan persiapkan jawaban pertanyaan umum.'],
                        ]; @endphp
                        @foreach($tips as $tip)
                        <div class="col-md-4">
                            <div style="display:flex;align-items:flex-start;gap:10px;">
                                <div style="width:32px;height:32px;background:rgba(37,99,235,.12);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                    <i class="{{ $tip[0] }}" style="color:var(--c-blue);font-size:12px;"></i>
                                </div>
                                <div>
                                    <div style="font-size:12.5px;font-weight:700;color:var(--c-900);margin-bottom:2px;">{{ $tip[1] }}</div>
                                    <div style="font-size:12px;color:var(--c-500);line-height:1.5;">{{ $tip[2] }}</div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Related --}}
                @if($related->count() > 0)
                <div class="mt-5" data-aos="fade-up">
                    <h3 style="font-size:1.05rem;font-weight:800;color:var(--c-900);margin-bottom:16px;">Lowongan Serupa</h3>
                    @foreach($related as $r)
                    <a href="{{ route('frontend.job-detail', $r->slug) }}" style="text-decoration:none;display:block;">
                        <div class="related-card">
                            <div class="related-card-logo">{{ substr($r->company_name,0,2) }}</div>
                            <div style="flex:1;min-width:0;">
                                <div style="font-size:14px;font-weight:700;color:var(--c-900);margin-bottom:3px;">{{ $r->title }}</div>
                                <div style="font-size:12.5px;color:var(--c-500);margin-bottom:7px;">{{ $r->company_name }}</div>
                                <div style="display:flex;flex-wrap:wrap;gap:5px;">
                                    <span style="font-size:11px;font-weight:600;color:var(--c-blue);background:var(--c-blue-xs);border:1px solid var(--c-blue-sm);padding:2px 8px;border-radius:100px;">{{ $r->job_type }}</span>
                                    <span style="font-size:11px;font-weight:600;color:var(--c-500);background:var(--c-100);border:1px solid var(--c-200);padding:2px 8px;border-radius:100px;">
                                        <i class="fas fa-map-marker-alt" style="font-size:9px;"></i> {{ $r->location }}
                                    </span>
                                </div>
                            </div>
                            <div style="font-size:13.5px;font-weight:800;color:var(--c-navy);flex-shrink:0;">{{ $r->salary_range }}</div>
                        </div>
                    </a>
                    @endforeach
                </div>
                @endif

            </div>

            {{-- Right sidebar --}}
            <div class="col-lg-4" style="align-self: flex-start;">
                <div class="jd-sidebar-sticky">
                <div class="jd-apply-card" data-aos="fade-left">
                    <div class="jd-apply-header">
                        <div style="font-size:11px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;">Gaji / Kompensasi</div>
                        <div class="jd-salary-big">{{ $job->salary_range }}</div>
                        <div class="jd-salary-sublabel">per bulan</div>
                    </div>
                    <div class="jd-apply-body">
                        @if($job->days_left <= 5 && $job->days_left > 0)
                        <div class="deadline-indicator">
                            <i class="fas fa-exclamation-triangle"></i>
                            <span>Hanya {{ $job->days_left }} hari lagi untuk melamar!</span>
                        </div>
                        @endif

                        {{-- Apply buttons --}}
                        <a href="{{ route('frontend.contact') }}?job={{ urlencode($job->title) }}" class="btn-corp btn-blue w-100 mb-3" style="justify-content:center;padding:13px 24px;font-size:14.5px;">
                            <i class="fas fa-paper-plane"></i> Lamar Sekarang
                        </a>
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $contactInfo->phone ?? '') }}?text={{ urlencode('Halo, saya tertarik dengan lowongan '.$job->title.' di '.$job->company_name) }}"
                           target="_blank"
                           style="display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(37,211,102,.1);color:#16a34a;border:1.5px solid rgba(37,211,102,.3);padding:12px 24px;border-radius:10px;font-size:14px;font-weight:700;margin-bottom:20px;transition:all .2s;text-decoration:none;"
                           onmouseenter="this.style.background='rgba(37,211,102,.2)'" onmouseleave="this.style.background='rgba(37,211,102,.1)'">
                            <i class="fab fa-whatsapp" style="font-size:16px;"></i> Tanya via WhatsApp
                        </a>

                        {{-- Job info --}}
                        <div class="jd-info-row">
                            <span class="jd-info-label"><i class="fas fa-briefcase"></i> Tipe</span>
                            <span class="jd-info-val">{{ $job->job_type }}</span>
                        </div>
                        <div class="jd-info-row">
                            <span class="jd-info-label"><i class="fas fa-map-marker-alt"></i> Lokasi</span>
                            <span class="jd-info-val">{{ $job->location }}</span>
                        </div>
                        <div class="jd-info-row">
                            <span class="jd-info-label"><i class="fas fa-user-tie"></i> Pengalaman</span>
                            <span class="jd-info-val">{{ $job->experience_level }}</span>
                        </div>
                        <div class="jd-info-row">
                            <span class="jd-info-label"><i class="fas fa-users"></i> Dibutuhkan</span>
                            <span class="jd-info-val">{{ $job->quota }} orang</span>
                        </div>
                        <div class="jd-info-row">
                            <span class="jd-info-label"><i class="fas fa-calendar-alt"></i> Deadline</span>
                            <span class="jd-info-val" style="{{ $job->days_left <= 5 ? 'color:#dc2626;' : '' }}">
                                {{ $job->deadline->format('d M Y') }}
                            </span>
                        </div>
                        <div class="jd-info-row">
                            <span class="jd-info-label"><i class="fas fa-eye"></i> Dilihat</span>
                            <span class="jd-info-val">{{ number_format($job->views) }}×</span>
                        </div>
                    </div>
                </div>

                {{-- Training promo --}}
                <div style="background:var(--c-navy);border-radius:16px;padding:22px;margin-top:16px;" data-aos="fade-up">
                    <div style="font-size:13.5px;font-weight:800;color:#fff;margin-bottom:6px;">
                        <i class="fas fa-graduation-cap me-2" style="color:#60a5fa;"></i>Belum Memenuhi Syarat?
                    </div>
                    <p style="font-size:12.5px;color:rgba(255,255,255,.55);margin-bottom:14px;line-height:1.65;">
                        Tingkatkan keahlian Anda melalui program pelatihan kami agar siap melamar lowongan ini.
                    </p>
                    <a href="{{ route('frontend.programs') }}" class="btn-corp btn-ghost btn-corp-sm w-100" style="justify-content:center;">
                        <i class="fas fa-book-open"></i> Lihat Program Pelatihan
                    </a>
                </div>
                </div>{{-- /jd-sidebar-sticky --}}
            </div>
        </div>
    </div>
</div>

@endsection