@extends('admin.layouts.app')

@section('title', 'Add 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">Add New 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.store') }}" method="POST">
                @csrf
                <div class="space-y-6">
                    <div>
                        <label class="form-label">Occupation Name</label>
                        <input type="text" name="name" class="form-input w-full rounded-lg px-4 py-2.5"
                            placeholder="e.g. Software Engineer" 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">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>

                    <div class="flex items-center gap-4 pt-2">
                        <button type="submit"
                            class="flex-1 bg-[#444ce7] hover:bg-[#3538cd] text-white font-semibold py-2.5 rounded-lg shadow-sm transition-all text-sm">
                            Save Occupation
                        </button>
                        <button type="submit" name="save_and_new" value="1"
                            class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-2.5 rounded-lg shadow-sm transition-all text-sm">
                            Save & Add Another
                        </button>
                        <a href="{{ route('admin.occupations.index') }}"
                            class="px-6 py-2.5 rounded-lg border border-slate-600 text-slate-300 font-semibold text-sm hover:bg-slate-800 hover:text-white transition-all">
                            Cancel
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection