<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $vacancy->title }} - E-Recruitment</title>
    <link rel="icon" type="image/png" href="{{ asset('assets/images/logo.png') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css?v=1779407811') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .detail-container {
            max-width: 900px;
            margin: 40px auto;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        .detail-header {
            background-color: var(--primary-green);
            color: white;
            padding: 40px;
            position: relative;
        }
        .detail-header h1 {
            margin: 0 0 10px 0;
            font-size: 2rem;
        }
        .detail-header .location {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        .detail-content {
            padding: 40px;
        }
        .detail-section {
            margin-bottom: 30px;
        }
        .detail-section h3 {
            color: var(--primary-green);
            margin-bottom: 15px;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .detail-list {
            padding-left: 20px;
            color: #444;
            line-height: 1.8;
        }
        .detail-list li {
            margin-bottom: 8px;
        }
        .btn-apply-large {
            display: block;
            width: 100%;
            text-align: center;
            background-color: #FF9800;
            color: white;
            padding: 15px;
            font-size: 1.2rem;
            font-weight: bold;
            border-radius: 8px;
            text-decoration: none;
            transition: background-color 0.3s;
            margin-top: 40px;
            border: none;
            cursor: pointer;
        }
        .btn-apply-large:hover {
            background-color: #F57C00;
        }
        .back-link {
            display: inline-block;
            margin-bottom: 20px;
            color: var(--primary-green);
            text-decoration: none;
            font-weight: 600;
        }
        .back-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body style="background-color: #E8F5E9;">

    <header class="header">
        <div class="logo-container">
            <div style="width: 45px; height: 45px; background-image: url('{{ asset('assets/images/logo.png') }}'); background-size: cover; border-radius: 4px;"></div>
            <div class="logo-text">
                <h1 style="margin:0; font-size: 1.2rem; font-weight: 700; color: #333;">E-Recruitment PT BBB Sekernan</h1>
                <p style="margin:0; font-size: 0.9rem; color: #666;">Recruitment Online</p>
            </div>
        </div>
                <nav class="nav-links">
            <a href="{{ route('index') }}" class="{{ request()->routeIs('index') ? 'active' : '' }}">Beranda</a>
            <a href="{{ route('pengumuman') }}" class="{{ request()->routeIs('pengumuman') ? 'active' : '' }}">Pengumuman</a>
            @guest
                <a href="{{ route('daftar') }}" class="{{ request()->routeIs('daftar') ? 'active' : '' }}">Daftar</a>
            @endguest
            <a href="{{ route('faq') }}" class="{{ request()->routeIs('faq') ? 'active' : '' }}">FAQ</a>
            @auth
                <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" style="color: #d32f2f; font-weight: bold;">Logout</a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>
            @endauth
        </nav>
    </header>

    <div class="detail-container">
        <div class="detail-content" style="padding-bottom: 0;">
            <a href="{{ route('index') }}" class="back-link"><i class="fas fa-arrow-left"></i> Kembali ke Daftar Lowongan</a>
        </div>
        
        <div class="detail-header">
            <h1>{{ $vacancy->title }}</h1>
            <div class="location"><i class="fas fa-map-marker-alt"></i> PT BBBS Estate - {{ $vacancy->location }}</div>
            <div style="margin-top: 20px; display: flex; gap: 15px; flex-wrap: wrap;">
                @if($vacancy->employment_type)
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem;"><i class="fas fa-clock"></i> {{ $vacancy->employment_type }}</span>
                @endif
                @if($vacancy->category)
                <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem;"><i class="fas fa-briefcase"></i> Kategori: {{ $vacancy->category }}</span>
                @endif
                @if($vacancy->department)
                <span style="background: rgba(255,255,255,0.25); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 600;"><i class="fas fa-building"></i> Dept: {{ $vacancy->department }}</span>
                @endif
            </div>
        </div>

        <div class="detail-content">
            <div class="detail-section">
                <h3><i class="fas fa-info-circle"></i> Deskripsi Pekerjaan</h3>
                <p style="color: #444; line-height: 1.8;">{!! nl2br(e($vacancy->description ?? 'Belum ada deskripsi.')) !!}</p>
            </div>

            @if($vacancy->requirements)
            <div class="detail-section">
                <h3><i class="fas fa-check-circle"></i> Kualifikasi / Persyaratan</h3>
                <div style="color: #444; line-height: 1.8;">{!! nl2br(e($vacancy->requirements)) !!}</div>
            </div>
            @endif

            @if($vacancy->benefits)
            <div class="detail-section">
                <h3><i class="fas fa-gift"></i> Fasilitas & Benefit</h3>
                <div style="color: #444; line-height: 1.8;">{!! nl2br(e($vacancy->benefits)) !!}</div>
            </div>
            @endif

            <a href="{{ route('form', $vacancy) }}" class="btn-apply-large"><i class="fas fa-paper-plane"></i> LAMAR PEKERJAAN INI</a>
            <p style="text-align: center; margin-top: 15px; color: #777; font-size: 0.9rem;">Klik untuk mengisi formulir lamaran online.</p>
        </div>
    </div>

    <footer class="footer" style="background-color: var(--primary-green); color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: 0 auto 40px auto; border-radius: 8px;">
        <span>Copyright &copy; 2026 PT Brahma Bina Bakti, All Rights Reserved.</span>
        <div style="font-weight: 900; font-style: italic; font-size: 1.2rem;">BBB</div>
    </footer>

</body>
</html>
