@extends('layouts.app')

@section('title', 'Careers')

@section('content')
    <section class="home-hero" style="min-height: auto; padding: 28px 0;">
        <span class="hero-orb one"></span>
        <div class="container hero-content" style="padding: 42px 0 20px; max-width: 960px;">
            <h1 class="hero-title" style="font-size: clamp(34px, 5.4vw, 62px);">Join Our Team</h1>
            <p class="hero-desc">Discover exciting career opportunities and be part of our mission to create innovative products.</p>

            <form method="get" class="filters" style="background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2);">
                <div class="form-group">
                    <label for="search" style="color:#fff;">Cari Posisi</label>
                    <input id="search" type="text" name="search" value="{{ $search }}" placeholder="Cari posisi, lokasi, atau departemen">
                </div>
                <div class="form-group">
                    <label for="department" style="color:#fff;">Departemen</label>
                    <select id="department" name="department">
                        <option value="">Semua</option>
                        @foreach ($departments as $department)
                            <option value="{{ $department }}" @selected($activeDepartment === $department)>{{ $department }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="location" style="color:#fff;">Lokasi</label>
                    <select id="location" name="location">
                        <option value="">Semua</option>
                        @foreach ($locations as $location)
                            <option value="{{ $location }}" @selected($activeLocation === $location)>{{ $location }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="align-self:end;">
                    <button class="btn btn-secondary" type="submit">Filter</button>
                </div>
            </form>
        </div>
    </section>

    <section class="section-sm">
        <div class="container">
            <h2 style="margin-top:0;">Open Positions ({{ $jobs->count() }})</h2>
            <div class="grid">
                @forelse ($jobs as $job)
                    <article class="card">
                        <h3 style="margin:0 0 8px;">{{ $job->title }}</h3>
                        <p class="muted" style="margin-top:0;">{{ $job->location }} - {{ $job->department }} - {{ $job->type }}</p>
                        <p class="muted">{{ \Illuminate\Support\Str::limit($job->description, 160) }}</p>
                        <a class="btn btn-outline" href="{{ route('careers.show', $job) }}">Lihat Detail</a>
                    </article>
                @empty
                    <article class="card card-flat"><p class="muted" style="margin:0;">Belum ada lowongan aktif.</p></article>
                @endforelse
            </div>
        </div>
    </section>
@endsection