@extends('admin.layouts.app')

@section('title', $job->exists ? 'Edit Jawatan' : 'Tambah Jawatan Baru')

@push('styles')
<style>
    .jk-admin {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 24px;
    }

    .jk-form-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e2e8f0;
    }

    .jk-form-header h1 {
        margin: 0;
        color: #0f172a;
        font-size: 20px;
        font-weight: 700;
    }

    .jk-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border: 1px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        transition: 0.2s;
    }

    .jk-btn-primary {
        background: #003c5d;
        color: #fff;
    }

    .jk-btn-primary:hover {
        background: #004d7a;
    }

    .jk-btn-secondary {
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #334155;
    }

    .jk-btn-secondary:hover {
        background: #e2e8f0;
    }

    .jk-section {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 24px;
    }

    .jk-section h3 {
        margin: 0 0 16px;
        color: #003c5d;
        font-size: 15px;
        font-weight: 600;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 8px;
    }

    .jk-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    @media (max-width: 768px) {
        .jk-grid {
            grid-template-columns: 1fr;
        }
    }

    .jk-field {
        margin-bottom: 0;
    }

    .jk-field label {
        display: block;
        font-size: 12px;
        color: #475569;
        margin-bottom: 6px;
        font-weight: 500;
    }

    .jk-field input,
    .jk-field select,
    .jk-field textarea {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font-size: 13px;
        color: #334155;
        box-sizing: border-box;
        background-color: #fff;
    }

    .jk-field input:focus,
    .jk-field select:focus,
    .jk-field textarea:focus {
        outline: none;
        border-color: #003c5d;
        box-shadow: 0 0 0 1px #003c5d;
    }

    .jk-field textarea {
        resize: vertical;
        min-height: 100px;
    }

    .jk-field-full {
        grid-column: 1 / -1;
    }

    .jk-dynamic-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
    }

    .jk-dynamic-item {
        display: flex;
        gap: 8px;
    }

    .jk-dynamic-item input {
        flex: 1;
    }

    .jk-dynamic-item button {
        padding: 8px 12px;
        border: 1px solid #ef4444;
        background: #fff;
        color: #ef4444;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        transition: 0.2s;
    }

    .jk-dynamic-item button:hover {
        background: #fee2e2;
    }

    .jk-add-btn {
        padding: 8px 16px;
        border: 1px dashed #003c5d;
        background: #f0fdf4;
        color: #003c5d;
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 500;
        margin-top: 12px;
        transition: 0.2s;
    }

    .jk-add-btn:hover {
        background: #dcfce7;
    }
</style>
@endpush

@section('content')
<div class="jk-admin">
    <div class="jk-form-header">
        <h1>{{ $job->exists ? '✏️ Edit Jawatan' : '➕ Tambah Jawatan Baru' }}</h1>
        <a href="{{ route('admin.jawatan.index') }}" class="jk-btn jk-btn-secondary">← Kembali</a>
    </div>

    <form method="POST" action="{{ $job->exists ? route('admin.jawatan.update', $job->id) : route('admin.jawatan.store') }}">
        @csrf
        @if($job->exists)
            @method('PUT')
        @endif

        <div class="jk-section">
            <h3>📋 Maklumat Asas</h3>
            <div class="jk-grid">
                <div class="jk-field">
                    <label>No. Rujukan</label>
                    <input type="text" name="ref_no" value="{{ old('ref_no', $job->ref_no) }}" placeholder="cth: LPSA/JV/01/2025" />
                </div>
                <div class="jk-field">
                    <label>Susunan (Ordering)</label>
                    <input type="number" name="ordering" value="{{ old('ordering', $job->ordering ?? 0) }}" min="0" />
                </div>
                <div class="jk-field">
                    <label>Jawatan (BM) *</label>
                    <input type="text" name="position_ms" value="{{ old('position_ms', $job->position_ms) }}" required />
                </div>
                <div class="jk-field">
                    <label>Position (EN)</label>
                    <input type="text" name="position_en" value="{{ old('position_en', $job->position_en) }}" />
                </div>
                <div class="jk-field">
                    <label>Kumpulan Perkhidmatan (BM)</label>
                    <input type="text" name="kumpulan_perkhidmatan_ms" value="{{ old('kumpulan_perkhidmatan_ms', $job->kumpulan_perkhidmatan_ms) }}" placeholder="cth: Pelaksana" />
                </div>
                <div class="jk-field">
                    <label>Kumpulan Perkhidmatan (EN)</label>
                    <input type="text" name="kumpulan_perkhidmatan_en" value="{{ old('kumpulan_perkhidmatan_en', $job->kumpulan_perkhidmatan_en) }}" placeholder="cth: Executive" />
                </div>
                <div class="jk-field">
                    <label>Bahagian (BM)</label>
                    <input type="text" name="department_ms" value="{{ old('department_ms', $job->department_ms) }}" />
                </div>
                <div class="jk-field">
                    <label>Department (EN)</label>
                    <input type="text" name="department_en" value="{{ old('department_en', $job->department_en) }}" />
                </div>
                <div class="jk-field">
                    <label>Jenis</label>
                    <select name="type">
                        <option value="tetap" {{ old('type', $job->type) === 'tetap' ? 'selected' : '' }}>Tetap</option>
                        <option value="kontrak" {{ old('type', $job->type) === 'kontrak' ? 'selected' : '' }}>Kontrak</option>
                    </select>
                </div>
                <div class="jk-field">
                    <label>Status</label>
                    <select name="status">
                        <option value="aktif" {{ old('status', $job->status) === 'aktif' ? 'selected' : '' }}>Aktif</option>
                        <option value="tamat" {{ old('status', $job->status) === 'tamat' ? 'selected' : '' }}>Tamat</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="jk-section">
            <h3>📍 Lokasi, Kelayakan, Gaji & Jadual Bekerja</h3>
            <div class="jk-grid">
                <div class="jk-field">
                    <label>Lokasi (BM)</label>
                    <input type="text" name="location_ms" value="{{ old('location_ms', $job->location_ms) }}" />
                </div>
                <div class="jk-field">
                    <label>Location (EN)</label>
                    <input type="text" name="location_en" value="{{ old('location_en', $job->location_en) }}" />
                </div>
                <div class="jk-field">
                    <label>Kelayakan (BM)</label>
                    <input type="text" name="qualification_ms" value="{{ old('qualification_ms', $job->qualification_ms) }}" />
                </div>
                <div class="jk-field">
                    <label>Qualification (EN)</label>
                    <input type="text" name="qualification_en" value="{{ old('qualification_en', $job->qualification_en) }}" />
                </div>
                <div class="jk-field">
                    <label>Gaji Min (RM)</label>
                    <input type="number" step="0.01" name="gaji_min" value="{{ old('gaji_min', $job->gaji_min) }}" placeholder="cth: 1800.00" />
                </div>
                <div class="jk-field">
                    <label>Gaji Max (RM)</label>
                    <input type="number" step="0.01" name="gaji_max" value="{{ old('gaji_max', $job->gaji_max) }}" placeholder="cth: 2500.00" />
                </div>
                <div class="jk-field">
                    <label>Waktu Bekerja (BM)</label>
                    <input type="text" name="waktu_bekerja_ms" value="{{ old('waktu_bekerja_ms', $job->waktu_bekerja_ms) }}" placeholder="cth: 8:00 AM - 5:00 PM" />
                </div>
                <div class="jk-field">
                    <label>Waktu Bekerja (EN)</label>
                    <input type="text" name="waktu_bekerja_en" value="{{ old('waktu_bekerja_en', $job->waktu_bekerja_en) }}" placeholder="cth: 8:00 AM - 5:00 PM" />
                </div>
                <div class="jk-field">
                    <label>Hari Bekerja (BM)</label>
                    <input type="text" name="hari_bekerja_ms" value="{{ old('hari_bekerja_ms', $job->hari_bekerja_ms) }}" placeholder="cth: Isnin - Jumaat" />
                </div>
                <div class="jk-field">
                    <label>Hari Bekerja (EN)</label>
                    <input type="text" name="hari_bekerja_en" value="{{ old('hari_bekerja_en', $job->hari_bekerja_en) }}" placeholder="cth: Monday - Friday" />
                </div>
                <div class="jk-field" style="display:none;">
                    <label>Gaji (BM) - Fallback</label>
                    <input type="text" name="salary_ms" value="{{ old('salary_ms', $job->salary_ms) }}" />
                </div>
                <div class="jk-field" style="display:none;">
                    <label>Salary (EN) - Fallback</label>
                    <input type="text" name="salary_en" value="{{ old('salary_en', $job->salary_en) }}" />
                </div>
            </div>
        </div>

        <div class="jk-section">
            <h3>📅 Tarikh & Pautan</h3>
            <div class="jk-grid">
                <div class="jk-field">
                    <label>Tarikh Terbit</label>
                    <input type="date" name="publish_date" value="{{ old('publish_date', $job->publish_date?->format('Y-m-d')) }}" />
                </div>
                <div class="jk-field">
                    <label>Tarikh Tutup</label>
                    <input type="date" name="close_date" value="{{ old('close_date', $job->close_date?->format('Y-m-d')) }}" />
                </div>
                <div class="jk-field">
                    <label>Pautan Butiran (Opsional - Overrides Default Page)</label>
                    <input type="url" name="details_link" value="{{ old('details_link', $job->details_link) }}" />
                </div>
                <div class="jk-field">
                    <label>Pautan Permohonan (Opsional - Overrides Default Form)</label>
                    <input type="url" name="apply_link" value="{{ old('apply_link', $job->apply_link) }}" />
                </div>
            </div>
        </div>

        <div class="jk-section">
            <h3>📝 Perihal Jawatan</h3>
            <div class="jk-grid">
                <div class="jk-field jk-field-full">
                    <label>Perihal Jawatan (BM)</label>
                    <textarea name="description_ms" rows="5">{{ old('description_ms', $job->description_ms) }}</textarea>
                </div>
                <div class="jk-field jk-field-full">
                    <label>Job Description (EN)</label>
                    <textarea name="description_en" rows="5">{{ old('description_en', $job->description_en) }}</textarea>
                </div>
            </div>
        </div>

        <div class="jk-section">
            <h3>📌 Syarat Permohonan</h3>
            <div class="jk-field jk-field-full">
                @php
                    $tanggungjawabVal = old('tanggungjawab', $job->tanggungjawab ?? '');
                    if (is_array($tanggungjawabVal)) {
                        $tanggungjawabVal = implode("\n", $tanggungjawabVal);
                    }
                @endphp
                <textarea name="tanggungjawab" rows="6" placeholder="Masukkan syarat-syarat permohonan di sini (satu syarat per baris)...">{{ $tanggungjawabVal }}</textarea>
            </div>
        </div>

        @php
            $dynamicFields = [
                'cara_memohon' => ['label' => '📨 Cara Memohon', 'placeholder' => 'Tambah langkah...'],
            ];
        @endphp

        @foreach ($dynamicFields as $fieldName => $config)
            @php
                $items = old($fieldName, $job->$fieldName ?? []);
                if (is_string($items)) {
                    $items = json_decode($items, true) ?: [];
                }
            @endphp
            <div class="jk-section">
                <h3>{{ $config['label'] }}</h3>
                <div class="jk-dynamic-list" id="list-{{ $fieldName }}">
                    @foreach ($items as $item)
                        <div class="jk-dynamic-item">
                            <input type="text" name="{{ $fieldName }}[]" value="{{ $item }}" />
                            <button type="button" onclick="this.parentElement.remove()">×</button>
                        </div>
                    @endforeach
                </div>
                <button type="button" class="jk-add-btn" data-list="list-{{ $fieldName }}" data-field="{{ $fieldName }}" data-placeholder="{{ $config['placeholder'] }}" onclick="addDynamicItemFromBtn(this)">
                    ＋ Tambah
                </button>
            </div>
        @endforeach

        <div class="jk-section">
            <h3>📞 Hubungi Kami</h3>
            <div class="jk-grid">
                <div class="jk-field">
                    <label>Pegawai Dihubungi</label>
                    <input type="text" name="contact_person" value="{{ old('contact_person', $job->contact_person) }}" />
                </div>
                <div class="jk-field">
                    <label>E-mel</label>
                    <input type="email" name="contact_email" value="{{ old('contact_email', $job->contact_email) }}" />
                </div>
                <div class="jk-field">
                    <label>Telefon</label>
                    <input type="text" name="contact_phone" value="{{ old('contact_phone', $job->contact_phone) }}" />
                </div>
                <div class="jk-field jk-field-full">
                    <label>Alamat Pejabat</label>
                    <textarea name="contact_address" rows="3">{{ old('contact_address', $job->contact_address) }}</textarea>
                </div>
            </div>
        </div>

        <div style="display:flex;gap:10px;justify-content:flex-end;padding:16px 0;">
            <a href="{{ route('admin.jawatan.index') }}" class="jk-btn jk-btn-secondary">Batal</a>
            <button type="submit" class="jk-btn jk-btn-primary">💾 Simpan</button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    function addDynamicItem(listId, fieldName, placeholder) {
        var list = document.getElementById(listId);
        var div = document.createElement('div');
        div.className = 'jk-dynamic-item';
        div.innerHTML = '<input type="text" name="' + fieldName + '[]" placeholder="' + placeholder + '" />' +
            '<button type="button" onclick="this.parentElement.remove()">×</button>';
        list.appendChild(div);
        div.querySelector('input').focus();
    }

    function addDynamicItemFromBtn(btn) {
        addDynamicItem(btn.dataset.list, btn.dataset.field, btn.dataset.placeholder);
    }
</script>
@endpush