<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
    <div>
        <label class="block text-sm font-medium text-slate-700">Title <span class="text-red-500">*</span></label>
        <input type="text" name="title" value="{{ old('title', $goal?->title) }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
        @error('title')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        <p data-js-error="title" class="mt-1 text-sm text-red-600 hidden"></p>
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Team</label>
        <input type="text" name="team" value="{{ old('team', $goal?->team) }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
        @error('team')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        <p data-js-error="team" class="mt-1 text-sm text-red-600 hidden"></p>
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Owner <span class="text-red-500">*</span></label>
        <select name="user_id" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
            <option value="">Select user</option>
            @foreach($users as $user)
                <option value="{{ $user->id }}" @selected(old('user_id', $goal?->user_id) == $user->id)>{{ $user->name }}</option>
            @endforeach
        </select>
        @error('user_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        <p data-js-error="user_id" class="mt-1 text-sm text-red-600 hidden"></p>
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Department <span class="text-red-500">*</span></label>
        <select name="department_id" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
            <option value="">Select department</option>
            @foreach($departments as $department)
                <option value="{{ $department->id }}" @selected(old('department_id', $goal?->department_id) == $department->id)>{{ $department->name }}</option>
            @endforeach
        </select>
        @error('department_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        <p data-js-error="department_id" class="mt-1 text-sm text-red-600 hidden"></p>
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Progress (%)</label>
        <input type="number" min="0" max="100" name="progress" value="{{ old('progress', $goal?->progress ?? 0) }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2" required>
        @error('progress')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Target <span class="text-red-500">*</span></label>
        <input type="text" name="target" value="{{ old('target', $goal?->target) }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
        @error('target')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        <p data-js-error="target" class="mt-1 text-sm text-red-600 hidden"></p>
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Due Date</label>
        <input type="date" name="due_date" value="{{ old('due_date', optional($goal?->due_date)->format('Y-m-d')) }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
        @error('due_date')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Status</label>
        <select name="status" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
            @foreach(['on_track', 'at_risk', 'behind', 'completed'] as $status)
                <option value="{{ $status }}" @selected(old('status', $goal?->status ?? 'on_track') === $status)>{{ ucwords(str_replace('_', ' ', $status)) }}</option>
            @endforeach
        </select>
        @error('status')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
</div>

<div>
    <label class="block text-sm font-medium text-slate-700">Description</label>
    <textarea name="description" rows="4" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">{{ old('description', $goal?->description) }}</textarea>
    @error('description')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    <p data-js-error="description" class="mt-1 text-sm text-red-600 hidden"></p>
</div>

<div class="flex gap-2">
    <x-button type="submit" variant="primary">Save</x-button>
    <a href="{{ route('goals.index') }}" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Cancel</a>
</div>
