@php
    /** @var \App\Models\WorkJob|null $job */
    $job = $job ?? null;
    $loc = $job?->location;
    $val = fn (string $field, $default = null) => old($field, $job?->{$field} ?? $default);
    $locVal = fn (string $field) => old($field, $loc?->{$field});
    $requiredAt = old('required_at', $job?->required_at?->format('Y-m-d\TH:i'));
@endphp
<div class="form-grid user-form-grid">
    <h3 class="form-section-title form-span-2">Job details</h3>
    <div class="form-group form-span-2">
        <label for="title">Title <span class="req">*</span></label>
        <input class="input" id="title" name="title" value="{{ $val('title') }}" placeholder="e.g. Fix leaking kitchen sink" required>
    </div>
    <div class="form-group">
        <label for="employer_id">Employer <span class="req">*</span></label>
        <select class="input" id="employer_id" name="employer_id" required>
            <option value="">Select employer</option>
            @foreach($employers as $user)
                <option value="{{ $user->id }}" @selected((string) $val('employer_id') === (string) $user->id)>{{ $user->name }} ({{ $user->email }})</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="status">Status <span class="req">*</span></label>
        <select class="input" id="status" name="status" required>
            @foreach($statuses as $s)
                <option value="{{ $s }}" @selected($val('status', 'draft') === $s)>{{ ucwords(str_replace('_', ' ', $s)) }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="category_id">Category</label>
        <select class="input" id="category_id" name="category_id">
            <option value="">Select category</option>
            @foreach($categories as $category)
                <option value="{{ $category->id }}" @selected((string) $val('category_id') === (string) $category->id)>{{ $category->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="skill_id">Skill</label>
        <select class="input" id="skill_id" name="skill_id">
            <option value="">Select skill</option>
            @foreach($skills as $skill)
                <option value="{{ $skill->id }}" data-category="{{ $skill->category_id }}" @selected((string) $val('skill_id') === (string) $skill->id)>{{ $skill->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="hire_mode">Hire mode <span class="req">*</span></label>
        <select class="input" id="hire_mode" name="hire_mode" required>
            @foreach($hireModes as $key => $label)
                <option value="{{ $key }}" @selected($val('hire_mode', 'instant') === $key)>{{ $label }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="work_mode">Work mode <span class="req">*</span></label>
        <select class="input" id="work_mode" name="work_mode" required>
            @foreach($workModes as $key => $label)
                <option value="{{ $key }}" @selected($val('work_mode', 'onsite') === $key)>{{ $label }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="urgency">Urgency <span class="req">*</span></label>
        <select class="input" id="urgency" name="urgency" required>
            @foreach($urgencies as $key => $label)
                <option value="{{ $key }}" @selected($val('urgency', 'normal') === $key)>{{ $label }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="assigned_professional_id">Assigned professional</label>
        <select class="input" id="assigned_professional_id" name="assigned_professional_id">
            <option value="">Unassigned</option>
            @foreach($professionals as $pro)
                <option value="{{ $pro->id }}" @selected((string) $val('assigned_professional_id') === (string) $pro->id)>{{ $pro->display_name }}{{ $pro->jobnixy_id ? ' · '.$pro->jobnixy_id : '' }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group form-span-2">
        <label for="description">Description</label>
        <textarea class="input" id="description" name="description" rows="4" placeholder="Describe the work required">{{ $val('description') }}</textarea>
    </div>

    <h3 class="form-section-title form-span-2">Budget &amp; schedule</h3>
    <div class="form-group">
        <label for="budget_min">Budget min</label>
        <input class="input" type="number" step="0.01" min="0" id="budget_min" name="budget_min" value="{{ $val('budget_min') }}" placeholder="0.00">
    </div>
    <div class="form-group">
        <label for="budget_max">Budget max</label>
        <input class="input" type="number" step="0.01" min="0" id="budget_max" name="budget_max" value="{{ $val('budget_max') }}" placeholder="0.00">
    </div>
    <div class="form-group">
        <label for="estimated_cost_min">Estimated cost min</label>
        <input class="input" type="number" step="0.01" min="0" id="estimated_cost_min" name="estimated_cost_min" value="{{ $val('estimated_cost_min') }}" placeholder="0.00">
    </div>
    <div class="form-group">
        <label for="estimated_cost_max">Estimated cost max</label>
        <input class="input" type="number" step="0.01" min="0" id="estimated_cost_max" name="estimated_cost_max" value="{{ $val('estimated_cost_max') }}" placeholder="0.00">
    </div>
    <div class="form-group">
        <label for="currency">Currency <span class="req">*</span></label>
        <input class="input" id="currency" name="currency" maxlength="3" value="{{ $val('currency', 'NGN') }}" required>
    </div>
    <div class="form-group">
        <label for="required_at">Required at</label>
        <input class="input" type="datetime-local" id="required_at" name="required_at" value="{{ $requiredAt }}">
    </div>
    <div class="form-group">
        <label for="estimated_duration_minutes">Estimated duration (minutes)</label>
        <input class="input" type="number" min="1" id="estimated_duration_minutes" name="estimated_duration_minutes" value="{{ $val('estimated_duration_minutes') }}">
    </div>

    <h3 class="form-section-title form-span-2">Matching requirements</h3>
    <div class="form-group">
        <label for="preferred_radius_km">Preferred radius (km) <span class="req">*</span></label>
        <input class="input" type="number" min="1" max="500" id="preferred_radius_km" name="preferred_radius_km" value="{{ $val('preferred_radius_km', 5) }}" required>
    </div>
    <div class="form-group">
        <label for="max_radius_km">Max radius (km) <span class="req">*</span></label>
        <input class="input" type="number" min="1" max="500" id="max_radius_km" name="max_radius_km" value="{{ $val('max_radius_km', 20) }}" required>
    </div>
    <div class="form-group">
        <label for="min_kyc_level">Min KYC level <span class="req">*</span></label>
        <select class="input" id="min_kyc_level" name="min_kyc_level" required>
            @for($i = 0; $i <= 5; $i++)
                <option value="{{ $i }}" @selected((string) $val('min_kyc_level', 1) === (string) $i)>Level {{ $i }}</option>
            @endfor
        </select>
    </div>
    <div class="form-group">
        <label for="min_trust_score">Min trust score <span class="req">*</span></label>
        <input class="input" type="number" step="0.01" min="0" max="100" id="min_trust_score" name="min_trust_score" value="{{ $val('min_trust_score', 0) }}" required>
    </div>
    <div class="form-group">
        <label for="min_experience_years">Min experience (years) <span class="req">*</span></label>
        <input class="input" type="number" min="0" max="60" id="min_experience_years" name="min_experience_years" value="{{ $val('min_experience_years', 0) }}" required>
    </div>

    <h3 class="form-section-title form-span-2">Location</h3>
    <div class="form-group">
        <label for="label">Label</label>
        <input class="input" id="label" name="label" value="{{ $locVal('label') }}" placeholder="e.g. Home, Office">
    </div>
    <div class="form-group">
        <label for="approx_area">Approximate area</label>
        <input class="input" id="approx_area" name="approx_area" value="{{ $locVal('approx_area') }}" placeholder="Shown before hire">
    </div>
    <div class="form-group">
        <label for="city">City</label>
        <input class="input" id="city" name="city" value="{{ $locVal('city') }}">
    </div>
    <div class="form-group">
        <label for="state">State</label>
        <input class="input" id="state" name="state" value="{{ $locVal('state') }}">
    </div>
    <div class="form-group">
        <label for="latitude">Latitude</label>
        <input class="input" type="number" step="0.0000001" min="-90" max="90" id="latitude" name="latitude" value="{{ $locVal('latitude') }}">
    </div>
    <div class="form-group">
        <label for="longitude">Longitude</label>
        <input class="input" type="number" step="0.0000001" min="-180" max="180" id="longitude" name="longitude" value="{{ $locVal('longitude') }}">
    </div>
</div>
@push('scripts')
<script>
(() => {
  const category = document.getElementById('category_id');
  const skill = document.getElementById('skill_id');
  if (!category || !skill) return;
  const filterSkills = () => {
    const cat = category.value;
    skill.querySelectorAll('option[data-category]').forEach((opt) => {
      const show = !cat || opt.dataset.category === cat;
      opt.hidden = !show;
      if (!show && opt.selected) skill.value = '';
    });
  };
  category.addEventListener('change', filterSkills);
  filterSkills();
})();
</script>
@endpush