@extends('admin.layouts.main')
@section('title', 'Kelola Lowongan Kerja')

@section('content')
{{-- Header --}}
<div class="page-header d-flex align-items-center justify-content-between flex-wrap gap-3">
    <div>
        <h1 class="page-title">Lowongan Kerja Luar Negeri</h1>
        <p class="page-sub">Kelola semua lowongan kerja ke luar negeri</p>
    </div>
    <a href="{{ route('admin.jobs.create') }}" class="btn-adm btn-primary-adm">
        <i class="fas fa-plus"></i> Tambah Lowongan
    </a>
</div>

{{-- Stats --}}
<div class="row g-3 mb-4">
    @foreach([
        ['Total Lowongan',$stats['total'],'fas fa-briefcase','#dbeafe','#2563eb'],
        ['Aktif',$stats['active'],'fas fa-check-circle','#dcfce7','#16a34a'],
        ['Unggulan',$stats['featured'],'fas fa-star','#fef3c7','#d97706'],
        ['Expiring Soon',$stats['expiring'],'fas fa-clock','#fef2f2','#dc2626'],
    ] as $s)
    <div class="col-md-3 col-6">
        <div style="background:var(--white);border:1px solid var(--c-200);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:12px;">
            <div style="width:42px;height:42px;border-radius:10px;background:{{ $s[3] }};display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i class="{{ $s[2] }}" style="color:{{ $s[4] }};font-size:.95rem;"></i>
            </div>
            <div>
                <div style="font-family:var(--ffd);font-size:1.5rem;font-weight:800;color:var(--c-900);line-height:1;">{{ $s[1] }}</div>
                <div style="font-size:12px;color:var(--c-500);">{{ $s[0] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Filters --}}
<div class="adm-card mb-4">
    <div class="adm-card-body" style="padding:16px 20px;">
        <form method="GET" action="{{ route('admin.jobs.index') }}" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label">Cari</label>
                <div style="position:relative;">
                    <i class="fas fa-search" style="position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--c-400);font-size:12px;pointer-events:none;"></i>
                    <input type="text" name="search" class="form-control" style="padding-left:32px;" placeholder="Judul, perusahaan, negara..." value="{{ request('search') }}">
                </div>
            </div>
            <div class="col-md-2">
                <label class="form-label">Negara</label>
                <select name="country" class="form-select">
                    <option value="">Semua Negara</option>
                    @foreach($countries as $c)
                    <option value="{{ $c }}" {{ request('country')==$c ? 'selected' : '' }}>{{ $c }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Kategori</label>
                <select name="category" class="form-select">
                    <option value="">Semua</option>
                    @foreach($categories as $c)
                    <option value="{{ $c }}" {{ request('category')==$c ? 'selected' : '' }}>{{ $c }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Status</label>
                <select name="status" class="form-select">
                    <option value="">Semua</option>
                    <option value="active" {{ request('status')=='active' ? 'selected' : '' }}>Aktif</option>
                    <option value="inactive" {{ request('status')=='inactive' ? 'selected' : '' }}>Nonaktif</option>
                </select>
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn-adm btn-primary-adm w-100"><i class="fas fa-filter"></i> Filter</button>
                <a href="{{ route('admin.jobs.index') }}" class="btn-adm btn-outline-adm"><i class="fas fa-times"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Table --}}
<div class="adm-card">
    <div class="adm-card-header">
        <div class="adm-card-title"><i class="fas fa-briefcase"></i> Daftar Lowongan ({{ $jobs->total() }})</div>
    </div>
    <div style="overflow-x:auto;">
        <table class="adm-table">
            <thead>
                <tr>
                    <th style="width:32px;">#</th>
                    <th>Posisi & Perusahaan</th>
                    <th>Negara</th>
                    <th>Kategori</th>
                    <th>Gaji</th>
                    <th>Kuota</th>
                    <th>Deadline</th>
                    <th>Status</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($jobs as $job)
                <tr>
                    <td style="color:var(--c-400);font-size:12px;">{{ $loop->iteration }}</td>
                    <td>
                        <div style="font-weight:700;color:var(--c-900);font-size:13.5px;">{{ Str::limit($job->title, 40) }}</div>
                        <div style="font-size:12px;color:var(--c-500);">{{ $job->company_name }}</div>
                        @if($job->is_featured)
                        <span class="abadge abadge-amber" style="font-size:10px;margin-top:3px;"><i class="fas fa-star" style="font-size:8px;"></i> Unggulan</span>
                        @endif
                    </td>
                    <td>
                        <div style="display:flex;align-items:center;gap:5px;">
                            <span style="font-size:16px;">
                                @if($job->country_code=='MY')🇲🇾@elseif($job->country_code=='SG')🇸🇬@elseif($job->country_code=='TW')🇹🇼@elseif($job->country_code=='HK')🇭🇰@elseif($job->country_code=='JP')🇯🇵@else🌐@endif
                            </span>
                            <span style="font-size:13px;font-weight:500;color:var(--c-700);">{{ $job->country }}</span>
                        </div>
                    </td>
                    <td><span class="abadge abadge-blue" style="font-size:11px;">{{ $job->category }}</span></td>
                    <td style="font-weight:700;color:var(--c-navy,#0f172a);font-size:13px;">{{ $job->salary_range }}</td>
                    <td style="text-align:center;font-weight:600;color:var(--c-700);">{{ $job->quota }}</td>
                    <td>
                        <div style="font-size:12.5px;{{ $job->days_left <= 5 ? 'color:#dc2626;font-weight:700;' : 'color:var(--c-500);' }}">
                            {{ $job->deadline->format('d M Y') }}
                        </div>
                        @if($job->days_left <= 7 && $job->days_left > 0)
                        <span class="abadge abadge-red" style="font-size:10px;">{{ $job->days_left }}h lagi</span>
                        @elseif($job->days_left == 0)
                        <span class="abadge abadge-red" style="font-size:10px;">Hari ini!</span>
                        @endif
                    </td>
                    <td>
                        @if($job->is_active)
                            <span class="abadge abadge-green"><i class="fas fa-circle" style="font-size:7px;"></i> Aktif</span>
                        @else
                            <span class="abadge abadge-gray"><i class="fas fa-circle" style="font-size:7px;"></i> Nonaktif</span>
                        @endif
                    </td>
                    <td>
                        <div class="d-flex justify-content-center gap-1" style="flex-wrap:nowrap;">
                            <a href="{{ route('frontend.job-detail', $job->slug) }}" target="_blank" class="btn-icon btn-icon-view" title="Lihat di website"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('admin.jobs.edit', $job->id) }}" class="btn-icon btn-icon-edit" title="Edit"><i class="fas fa-edit"></i></a>
                            <form action="{{ route('admin.jobs.toggle-active', $job->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn-icon btn-icon-toggle" title="{{ $job->is_active ? 'Nonaktifkan' : 'Aktifkan' }}">
                                    <i class="fas fa-{{ $job->is_active ? 'eye-slash' : 'eye' }}"></i>
                                </button>
                            </form>
                            <form action="{{ route('admin.jobs.toggle-featured', $job->id) }}" method="POST">
                                @csrf
                                <button type="submit" class="btn-icon" style="background:{{ $job->is_featured ? '#fef3c7' : 'var(--c-100)' }};color:{{ $job->is_featured ? '#d97706' : 'var(--c-500)' }};" title="Unggulan">
                                    <i class="fas fa-star"></i>
                                </button>
                            </form>
                            <form action="{{ route('admin.jobs.destroy', $job->id) }}" method="POST" id="del-job-{{ $job->id }}">
                                @csrf @method('DELETE')
                                <button type="button" class="btn-icon btn-icon-del" onclick="confirmDelete('del-job-{{ $job->id }}')" title="Hapus"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="9" style="text-align:center;padding:36px;color:var(--c-400);">
                        <i class="fas fa-briefcase" style="font-size:2rem;display:block;margin-bottom:10px;color:var(--c-200);"></i>
                        Belum ada lowongan. <a href="{{ route('admin.jobs.create') }}" style="color:var(--blue);">Tambah sekarang</a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($jobs->hasPages())
    <div style="padding:16px 20px;border-top:1px solid var(--c-100);">
        {{ $jobs->links() }}
    </div>
    @endif
</div>
@endsection