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

@section('content')
<div class="page-header d-flex align-items-center justify-content-between">
    <div>
        <h1 class="page-title">Tambah Lowongan Baru</h1>
        <p class="page-sub">Isi semua informasi lowongan kerja luar negeri</p>
    </div>
    <a href="{{ route('admin.jobs.index') }}" class="btn-adm btn-outline-adm">
        <i class="fas fa-arrow-left"></i> Kembali
    </a>
</div>

<form action="{{ route('admin.jobs.store') }}" method="POST">
    @csrf
    <div class="row g-4">
        {{-- LEFT --}}
        <div class="col-lg-8">
            {{-- Basic Info --}}
            <div class="adm-card mb-4">
                <div class="adm-card-header">
                    <div class="adm-card-title"><i class="fas fa-info-circle"></i> Informasi Dasar</div>
                </div>
                <div class="adm-card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="form-group">
                                <label class="form-label">Judul Posisi / Jabatan <span style="color:#ef4444;">*</span></label>
                                <input type="text" name="title" class="form-control" placeholder="Contoh: Baby Sitter, Caregiver, Perawat..." value="{{ old('title') }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Nama Perusahaan / Agensi <span style="color:#ef4444;">*</span></label>
                                <input type="text" name="company_name" class="form-control" placeholder="Nama perusahaan atau agensi" value="{{ old('company_name') }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label">Lokasi (Kota/Wilayah) <span style="color:#ef4444;">*</span></label>
                                <input type="text" name="location" class="form-control" placeholder="Contoh: Kuala Lumpur, Malaysia" value="{{ old('location') }}" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Description --}}
            <div class="adm-card mb-4">
                <div class="adm-card-header">
                    <div class="adm-card-title"><i class="fas fa-align-left"></i> Deskripsi & Persyaratan</div>
                </div>
                <div class="adm-card-body">
                    <div class="form-group">
                        <label class="form-label">Deskripsi Pekerjaan <span style="color:#ef4444;">*</span></label>
                        <textarea name="description" class="form-control" rows="5" placeholder="Jelaskan deskripsi pekerjaan secara detail..." required>{{ old('description') }}</textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Kualifikasi & Persyaratan <span style="color:#ef4444;">*</span></label>
                        <textarea name="requirements" class="form-control" rows="6" placeholder="- Persyaratan 1&#10;- Persyaratan 2&#10;- Persyaratan 3..." required>{{ old('requirements') }}</textarea>
                        <div class="form-hint">Gunakan format: - Poin persyaratan (satu baris per poin)</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Benefit & Fasilitas</label>
                        <textarea name="benefits" class="form-control" rows="5" placeholder="- Gaji kompetitif&#10;- Tiket PP ditanggung&#10;- Akomodasi disediakan...">{{ old('benefits') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- RIGHT --}}
        <div class="col-lg-4">
            {{-- Country --}}
            <div class="adm-card mb-4">
                <div class="adm-card-header">
                    <div class="adm-card-title"><i class="fas fa-globe"></i> Negara Tujuan</div>
                </div>
                <div class="adm-card-body">
                    <div class="form-group">
                        <label class="form-label">Negara <span style="color:#ef4444;">*</span></label>
                        <select name="country" class="form-select" id="countrySelect" onchange="autoFillCountry(this)" required>
                            <option value="">Pilih Negara</option>
                            @foreach([
                                ['Malaysia','MY','MYR'],['Singapore','SG','SGD'],
                                ['Taiwan','TW','TWD'],['Hong Kong','HK','HKD'],
                                ['Jepang','JP','JPY'],
                            ] as $c)
                            <option value="{{ $c[0] }}" data-code="{{ $c[1] }}" data-currency="{{ $c[2] }}" {{ old('country')==$c[0] ? 'selected' : '' }}>
                                {{ $c[0] }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Kode Negara</label>
                                <input type="text" name="country_code" class="form-control" placeholder="MY / SG / JP" id="countryCode" value="{{ old('country_code') }}" required>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Mata Uang</label>
                                <input type="text" name="currency" class="form-control" placeholder="MYR / SGD" id="currency" value="{{ old('currency') }}" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Salary & Type --}}
            <div class="adm-card mb-4">
                <div class="adm-card-header">
                    <div class="adm-card-title"><i class="fas fa-money-bill"></i> Gaji & Tipe Kerja</div>
                </div>
                <div class="adm-card-body">
                    <div class="form-group">
                        <label class="form-label">Tipe Pekerjaan <span style="color:#ef4444;">*</span></label>
                        <select name="job_type" class="form-select" required>
                            @foreach(['Full-time','Part-time','Contract','Seasonal'] as $t)
                            <option value="{{ $t }}" {{ old('job_type')==$t ? 'selected' : '' }}>{{ $t }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Kategori <span style="color:#ef4444;">*</span></label>
                        <select name="category" class="form-select" required>
                            <option value="">Pilih Kategori</option>
                            @foreach(['Baby Sitter','Caregiver','Caretaker','Spa Terapis','Perhotelan','Cleaning Service','Restaurant','Pertanian','Perawat','Pengepakan Makanan','Pabrik Las','Pabrik Jahit Jok Mobil','Sopir','Lainnya'] as $cat)
                            <option value="{{ $cat }}" {{ old('category')==$cat ? 'selected' : '' }}>{{ $cat }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Level Pengalaman <span style="color:#ef4444;">*</span></label>
                        <select name="experience_level" class="form-select" required>
                            @foreach(['Fresh Graduate','1-2 Tahun','3-5 Tahun'] as $e)
                            <option value="{{ $e }}" {{ old('experience_level')==$e ? 'selected' : '' }}>{{ $e }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Gaji Min</label>
                                <input type="number" name="salary_min" class="form-control" placeholder="0" value="{{ old('salary_min') }}">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="form-label">Gaji Max</label>
                                <input type="number" name="salary_max" class="form-control" placeholder="0" value="{{ old('salary_max') }}">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                            <input type="checkbox" name="salary_negotiable" {{ old('salary_negotiable') ? 'checked' : '' }}>
                            <span style="font-size:13px;font-weight:500;color:var(--c-700);">Gaji Negotiable</span>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Details --}}
            <div class="adm-card mb-4">
                <div class="adm-card-header">
                    <div class="adm-card-title"><i class="fas fa-calendar"></i> Detail Penempatan</div>
                </div>
                <div class="adm-card-body">
                    <div class="form-group">
                        <label class="form-label">Deadline Pendaftaran <span style="color:#ef4444;">*</span></label>
                        <input type="date" name="deadline" class="form-control" value="{{ old('deadline') }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Kuota / Jumlah Dibutuhkan <span style="color:#ef4444;">*</span></label>
                        <input type="number" name="quota" class="form-control" min="1" value="{{ old('quota', 1) }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Durasi Kontrak</label>
                        <input type="text" name="contract_duration" class="form-control" placeholder="Contoh: 2 Tahun, 3 Tahun (SSW)" value="{{ old('contract_duration') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Kota Keberangkatan</label>
                        <input type="text" name="departure_city" class="form-control" placeholder="Contoh: Jakarta / Surabaya / Semarang" value="{{ old('departure_city') }}">
                    </div>
                </div>
            </div>

            {{-- Status --}}
            <div class="adm-card mb-4">
                <div class="adm-card-header">
                    <div class="adm-card-title"><i class="fas fa-toggle-on"></i> Status Publikasi</div>
                </div>
                <div class="adm-card-body">
                    <label style="display:flex;align-items:center;gap:10px;padding:12px;background:var(--c-50);border-radius:9px;cursor:pointer;margin-bottom:10px;">
                        <input type="checkbox" name="is_active" {{ old('is_active', true) ? 'checked' : '' }}>
                        <div>
                            <div style="font-size:13.5px;font-weight:600;color:var(--c-900);">Aktif / Published</div>
                            <div style="font-size:11.5px;color:var(--c-500);">Tampil di halaman lowongan website</div>
                        </div>
                    </label>
                    <label style="display:flex;align-items:center;gap:10px;padding:12px;background:var(--c-50);border-radius:9px;cursor:pointer;">
                        <input type="checkbox" name="is_featured" {{ old('is_featured') ? 'checked' : '' }}>
                        <div>
                            <div style="font-size:13.5px;font-weight:600;color:var(--c-900);">Lowongan Unggulan</div>
                            <div style="font-size:11.5px;color:var(--c-500);">Tampil di bagian unggulan</div>
                        </div>
                    </label>
                </div>
            </div>

            <div class="d-flex gap-3">
                <button type="submit" class="btn-adm btn-primary-adm flex-fill" style="justify-content:center;">
                    <i class="fas fa-save"></i> Simpan Lowongan
                </button>
                <a href="{{ route('admin.jobs.index') }}" class="btn-adm btn-outline-adm">Batal</a>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
const countryData = {
    'Malaysia':    {code:'MY', currency:'MYR'},
    'Singapore':   {code:'SG', currency:'SGD'},
    'Taiwan':      {code:'TW', currency:'TWD'},
    'Hong Kong':   {code:'HK', currency:'HKD'},
    'Jepang':      {code:'JP', currency:'JPY'},
};
function autoFillCountry(sel) {
    const val = sel.value;
    if (countryData[val]) {
        document.getElementById('countryCode').value = countryData[val].code;
        document.getElementById('currency').value    = countryData[val].currency;
    }
}
</script>
@endpush