@php
    $status = old('status', $item?->status ?? 'draft');
@endphp

<section id="basics" class="home-seo-card space-y-4"
         x-data="{
            title: @js(old('title', $item?->title ?? '')),
            slug: @js(old('slug', $item?->slug ?? '')),
            slugTouched: {{ old('slug', $item?->slug) ? 'true' : 'false' }},
            syncSlug() {
                if (this.slugTouched) return;
                this.slug = this.title
                    .toLowerCase()
                    .trim()
                    .replace(/[^a-z0-9]+/g, '-')
                    .replace(/^-+|-+$/g, '');
            }
         }">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Basics</h3>
        <p class="text-xs text-slate-500">Role title, URL slug, department, and location.</p>
    </div>
    <div class="home-field-grid">
        <div class="span-2">
            <label class="home-label">Title</label>
            <input type="text" name="title" x-model="title" @input="syncSlug()" required class="home-input" placeholder="e.g. Senior Virtual Assistant">
            @error('title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Slug</label>
            <input type="text" name="slug" x-model="slug" @input="slugTouched = true" required class="home-input" placeholder="senior-virtual-assistant">
            @error('slug')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Department</label>
            <input type="text" name="department" value="{{ old('department', $item?->department) }}" class="home-input" placeholder="Operations">
            @error('department')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Location</label>
            <input type="text" name="location" value="{{ old('location', $item?->location) }}" class="home-input" placeholder="Remote · AEST">
            @error('location')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Employment type</label>
            <select name="employment_type" class="home-select">
                @php
                    $type = old('employment_type', $item?->employment_type);
                    $types = ['Full-time', 'Part-time', 'Contract', 'Freelance', 'Internship'];
                @endphp
                <option value="">Select type</option>
                @foreach ($types as $option)
                    <option value="{{ $option }}" @selected($type === $option)>{{ $option }}</option>
                @endforeach
                @if($type && ! in_array($type, $types, true))
                    <option value="{{ $type }}" selected>{{ $type }}</option>
                @endif
            </select>
            @error('employment_type')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
    </div>
</section>

<section id="copy" class="home-seo-card space-y-4 mt-4">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Role copy</h3>
        <p class="text-xs text-slate-500">Description, requirements, and benefits for the public career page.</p>
    </div>
    <div>
        <label class="home-label">Description</label>
        <textarea name="description" rows="6" class="home-textarea" placeholder="About the role and what success looks like…">{{ old('description', $item?->description) }}</textarea>
        @error('description')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="home-label">Requirements</label>
        <textarea name="requirements" rows="5" class="home-textarea" placeholder="Skills, experience, and must-haves…">{{ old('requirements', $item?->requirements) }}</textarea>
        @error('requirements')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="home-label">Benefits</label>
        <textarea name="benefits" rows="4" class="home-textarea" placeholder="Perks, flexibility, growth opportunities…">{{ old('benefits', $item?->benefits) }}</textarea>
        @error('benefits')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
    </div>
</section>

<section id="publish" class="home-seo-card space-y-4 mt-4">
    <div>
        <h3 class="text-sm font-semibold text-slate-900">Publish</h3>
        <p class="text-xs text-slate-500">Control visibility, schedule, and listing order.</p>
    </div>
    <div class="home-field-grid">
        <div>
            <label class="home-label">Status</label>
            <select name="status" class="home-select" required>
                <option value="draft" @selected($status === 'draft')>Draft</option>
                <option value="published" @selected($status === 'published')>Published</option>
            </select>
            @error('status')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Sort order</label>
            <input type="number" name="sort_order" value="{{ old('sort_order', $item?->sort_order ?? 0) }}" class="home-input" min="0" step="1">
            @error('sort_order')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Published at</label>
            <input type="datetime-local" name="published_at" class="home-input"
                   value="{{ old('published_at', optional($item?->published_at)->format('Y-m-d\TH:i')) }}">
            @error('published_at')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="home-label">Expires at</label>
            <input type="datetime-local" name="expires_at" class="home-input"
                   value="{{ old('expires_at', optional($item?->expires_at)->format('Y-m-d\TH:i')) }}">
            @error('expires_at')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>
    </div>
</section>