{mode === 'create' ? 'Create New Employee' : 'Edit Employee'}

{mode === 'edit' && ( ID. Pegawai {data.employee_id} )}

{/* User Information Section */}

Nama Lengkap * setData('name', e.target.value)} placeholder="Joko Susanto" />

Email * setData('email', e.target.value)} placeholder="joko_susanto@example.com" />

{mode === 'create' && (

Password* setData('password', e.target.value)} placeholder="••••••••" />

)}

Jenis Kelamin * setData('gender', value)} className="flex gap-4" >

Laki-laki

Perempuan

NIK setData('nik', e.target.value)} placeholder="16-digit NIK" />

Tanggal Lahir * date && setData('birth_date', toLocalISOString(date))} initialFocus />

Tempat Kelahiran setData('birth_place', e.target.value)} placeholder="Jakarta" />

Nomor Telepon (HP) setData('phone_number', e.target.value)} placeholder="08123456789" />

Spesialisasi setData('specialization', e.target.value)} placeholder="Dokter Spesialis Saraf (Sp.S)" />

Nomor STR setData('license_number', e.target.value)} placeholder="1028305" /> Masukkan 7 digit terakhir nomor STR

Address

setData('address', e.target.value)}
                                        placeholder="Full address"
                                    />
                                    <InputError message={errors.address} />
                                </div>
                            </div>

<div className="space-y-2">
                                <Label htmlFor="join_date">Tanggal Bergabung *</Label>
                                <Popover>
                                    <PopoverTrigger asChild>
                                        <Button
                                            variant={"outline"}
                                            className={cn(
                                                "w-full justify-start text-left font-normal",
                                                !data.join_date && "text-muted-foreground"
                                            )}
                                        >
                                            <CalendarIcon className="mr-2 h-4 w-4" />
                                            {data.join_date ? (
                                                format(new Date(data.join_date), "dd/MM/yyyy")
                                            ) : (
                                                <span>Pick a date</span>
                                            )}
                                        </Button>
                                    </PopoverTrigger>
                                    <PopoverContent className="w-auto p-0">
                                        <Calendar
                                            mode="single"
                                            selected={data.join_date ? new Date(data.join_date) : undefined}
                                            onSelect={(date) => date && setData('join_date', toLocalISOString(date))}
                                            initialFocus
                                        />
                                    </PopoverContent>
                                </Popover>
                                <InputError message={errors.join_date} />
                            </div>

{mode === 'edit' && (
                                <div className="space-y-2">
                                    <Label htmlFor="resign_date">Resign Date</Label>
                                    <Popover>
                                        <PopoverTrigger asChild>
                                            <Button
                                                variant={"outline"}
                                                className={cn(
                                                    "w-full justify-start text-left font-normal",
                                                    !data.resign_date && "text-muted-foreground"
                                                )}
                                            >
                                                <CalendarIcon className="mr-2 h-4 w-4" />
                                                {data.resign_date ? (
                                                    format(new Date(data.resign_date), "dd/MM/yyyy")
                                                ) : (
                                                    <span>Pilih Tanggal</span>
                                                )}
                                            </Button>
                                        </PopoverTrigger>
                                        <PopoverContent className="w-auto p-0">
                                            <Calendar
                                                mode="single"
                                                selected={data.resign_date ? new Date(data.resign_date) : undefined}
                                                onSelect={(date) => setData('resign_date', date ? toLocalISOString(date) : '')}
                                                initialFocus
                                            />
                                        </PopoverContent>
                                    </Popover>
                                    <InputError message={errors.resign_date} />
                                </div>
                                )
                            }

{mode === 'edit' && (
                                <div className="mb-2">
                                    <span className="mb-2">Pegawai masih bekerja?</span>
                                    <div className="flex items-center space-x-2 mt-2">
                                        <input
                                            type="checkbox"
                                            id="is_active"
                                            checked={data.is_active}
                                            onChange={(e) => setData('is_active', e.target.checked)}
                                            className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                                        />
                                        <Label htmlFor="is_active">Ya</Label>
                                    </div>
                                </div>
                            )}

</div>

<div className="flex justify-end gap-2">
                            <Button variant="outline" type="button" onClick={() => window.history.back()}>
                                Cancel
                            </Button>
                            <Button type="submit" disabled={processing}>
                                {mode === 'create' ? 'Create' : 'Update'} Employee
                            </Button>
                        </div>
                    </form>
                </div>
            </div>
        </AppLayout>
    );
}