<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Recruitment PT BBB Sekernan</title>
    <link rel="icon" type="image/png" href="{{ asset('assets/images/logo.png') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css?v=1779407811') }}">
    <!-- FontAwesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>

    <!-- Header -->

    <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>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h2>Membangun Masa Depan<br>Bersama PT Brahma Bina Bakti</h2>
            <p>Kesempatan Karir Luar Biasa di PT BBBS Estate</p>
        </div>
        <div class="hero-image-box">
            <!-- Placeholder for the worker image -->
            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=400&h=500" alt="Worker">
        </div>
    </section>

    <!-- Main Content -->
    @php
        $departments = $vacancies->pluck('department')->unique()->filter()->values();
    @endphp
    <section class="main-content">
        <div class="job-section">
            <div class="job-section-header">
                <h3>Lowongan Terbaru</h3>
                <span>Cari Lowongan Berdasarkan Departemen:</span>
                <select id="department-select" onchange="filterDepartment()">
                    <option value="">Semua Departemen</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept }}">{{ $dept }}</option>
                    @endforeach
                </select>
            </div>
            <div class="job-cards">
                @forelse($vacancies as $vacancy)
                <div class="job-card" data-department="{{ $vacancy->department }}">
                    <h4>{{ $vacancy->title }}</h4>
                    <p>PT BBBS Estate @if($vacancy->department) — <strong>{{ $vacancy->department }}</strong> @endif</p>
                    <span class="location"><i class="fas fa-map-marker-alt"></i> {{ $vacancy->location }}</span>
                    @php
                        $hasApplied = auth()->check() && \App\Models\Applicant::where('user_id', auth()->id())->where('vacancy_id', $vacancy->id)->exists();
                    @endphp
                    @if($hasApplied)
                        <a href="javascript:void(0)" class="btn-lamar" style="background: #9CA3AF; cursor: not-allowed; pointer-events: none;">SUDAH DILAMAR</a>
                    @else
                        <a href="{{ route('detail', $vacancy) }}" class="btn-lamar">DETAIL & LAMAR</a>
                    @endif
                </div>
                @empty
                <div style="text-align: center; padding: 2rem; color: #999; width: 100%;">
                    <i class="fas fa-briefcase" style="font-size: 2rem; margin-bottom: 0.5rem;"></i>
                    <p>Belum ada lowongan tersedia saat ini.</p>
                </div>
                @endforelse
            </div>
        </div>

        <div class="why-join">
            <h3>Mengapa Bergabung?</h3>
            <ul class="why-list">
                <li>
                    <i class="fas fa-users"></i>
                    <div>Kenapa PT Brahma Bina Bakti<br>Sekernan?</div>
                </li>
                <li>
                    <i class="fas fa-money-bill-wave"></i>
                    <div>Gaji Kompetitif & BPJS</div>
                </li>
                <li>
                    <i class="fas fa-chalkboard-teacher"></i>
                    <div>Pelatihan Berkelanjutan</div>
                </li>
                <li>
                    <i class="fas fa-hands-helping"></i>
                    <div>Kerja Tim yang Solid</div>
                </li>
                <li>
                    <i class="fas fa-shield-alt"></i>
                    <div>Lingkungan Kerja Aman</div>
                </li>
            </ul>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-contact">
            <i class="fas fa-cog fa-2x"></i>
            <div class="footer-contact-details">
                <p><strong>Hubungi Kami (Rekrutmen):</strong></p>
                <p><i class="fab fa-whatsapp"></i> 0895-3041-5281</p>
                <p><i class="fas fa-envelope"></i> pga.bbb_sawit@tap-agri.com</p>
            </div>
        </div>
        <div class="footer-social">
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-facebook"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fas fa-times"></i></a>
        </div>
    </footer>
    <div class="footer-bottom">
        &copy; 2024 PT Brahma Bina Bakti Sekernan. Semua Hak Dilindungi.
    </div>

    <script>
    function filterDepartment() {
        const selectedDept = document.getElementById('department-select').value.toLowerCase().trim();
        const cards = document.querySelectorAll('.job-card');
        let hasVisible = false;
        
        cards.forEach(card => {
            const cardDept = (card.getAttribute('data-department') || '').toLowerCase().trim();
            if (selectedDept === '' || cardDept === selectedDept) {
                card.style.display = 'flex';
                hasVisible = true;
            } else {
                card.style.display = 'none';
            }
        });
        
        // Handle "No vacancies for this department"
        let noJobMessage = document.getElementById('no-vacancies-filter-message');
        if (!hasVisible) {
            if (!noJobMessage) {
                const container = document.querySelector('.job-cards');
                noJobMessage = document.createElement('div');
                noJobMessage.id = 'no-vacancies-filter-message';
                noJobMessage.style.gridColumn = '1 / -1';
                noJobMessage.style.textAlign = 'center';
                noJobMessage.style.padding = '3rem 1.5rem';
                noJobMessage.style.color = '#999';
                noJobMessage.style.width = '100%';
                noJobMessage.innerHTML = `
                    <i class="fas fa-briefcase" style="font-size: 2.5rem; margin-bottom: 1rem; color: #ccc;"></i>
                    <p style="font-size: 1rem; font-weight: 500;">Belum ada lowongan tersedia untuk departemen ini.</p>
                `;
                container.appendChild(noJobMessage);
            } else {
                noJobMessage.style.display = 'block';
            }
        } else {
            if (noJobMessage) {
                noJobMessage.style.display = 'none';
            }
        }
    }
    </script>
</body>
</html>
