@extends('admin.layouts.app')

@section('title', 'Edit Occupation')

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.occupations.index') }}"
            class="text-slate-400 hover:text-white flex items-center gap-2 mb-2 text-xs transition-colors">
            <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
            Back to List
        </a>
        <h1 class="text-xl font-bold text-white tracking-tight">Edit Occupation</h1>
    </div>

    <div class="max-w-2xl">
        <div class="bg-[#101828] border border-white/5 rounded-xl p-8">
            <form action="{{ route('admin.occupations.update', $occupation) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="space-y-6">
                    <div>
                        <label class="form-label">Occupation Name</label>
                        <input type="text" name="name" value="{{ old('name', $occupation->name) }}"
                            class="form-input w-full rounded-lg px-4 py-2.5" required>
                        @error('name') <p class="text-red-500 text-xs mt-1.5">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label class="form-label">Status</label>
                        <select name="status"
                            class="form-input w-full rounded-lg px-4 py-2.5 appearance-none cursor-pointer">
                            <option value="1" {{ $occupation->status ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ !$occupation->status ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>

                    <div class="pt-2">
                        <button type="submit"
                            class="w-full bg-[#444ce7] hover:bg-[#3538cd] text-white font-semibold py-2.5 rounded-lg shadow-sm transition-all text-sm">
                            Update Occupation
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection