Voltar ao catálogo } />

{' '} Período e utilização form.setData( 'starts_at', e.target.value, ) } /> form.setData( 'ends_at', e.target.value, ) } />

form.setData( 'usage_location', e.target.value, ) } placeholder="Ex.: Auditório principal" />

Confirme a disponibilidade sempre que alterar o período.

Finalidade

form.setData(
                                                'purpose',
                                                e.target.value,
                                            )
                                        }
                                        rows={4}
                                        placeholder="Descreva brevemente a atividade e a necessidade do equipamento…"
                                        className="mt-2 w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
                                    />
                                    <InputError message={form.errors.purpose} />
                                </div>
                            </CardContent>
                        </Card>
                        <Card className="border-slate-200 shadow-none dark:border-slate-800">
                            <CardHeader>
                                <CardTitle className="flex items-center gap-2">
                                    <PackageCheck className="size-5 text-primary" />{' '}
                                    {periodSelected
                                        ? 'Equipamentos livres no período'
                                        : 'Equipamentos requisitáveis'}
                                </CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-3">
                                {assets.length === 0 && (
                                    <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
                                        Não existem equipamentos livres para o
                                        período escolhido.
                                    </p>
                                )}
                                {assets.map((asset) => {
                                    const checked =
                                        form.data.asset_ids.includes(asset.id);

return (
                                        <label
                                            key={asset.id}
                                            className={`flex cursor-pointer items-start gap-3 rounded-lg border p-4 transition ${checked ? 'border-primary bg-primary/5' : 'hover:bg-slate-50 dark:hover:bg-slate-900'}`}
                                        >
                                            <Checkbox
                                                checked={checked}
                                                onCheckedChange={(value) =>
                                                    toggleAsset(
                                                        asset.id,
                                                        Boolean(value),
                                                    )
                                                }
                                            />
                                            <div className="min-w-0 flex-1">
                                                <div className="flex justify-between gap-3">
                                                    <span className="font-medium">
                                                        {asset.name}
                                                    </span>
                                                    <span className="font-mono text-xs text-muted-foreground">
                                                        {asset.asset_tag}
                                                    </span>
                                                </div>
                                                <p className="mt-1 text-xs text-muted-foreground">
                                                    {asset.category_name} ·{' '}
                                                    {asset.model_name}
                                                </p>
                                                {asset.location_name && (
                                                    <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
                                                        <MapPin className="size-3" />
                                                        {asset.location_name}
                                                    </p>
                                                )}
                                            </div>
                                        </label>
                                    );
                                })}
                                <InputError message={form.errors.asset_ids} />
                            </CardContent>
                        </Card>
                    </div>
                    <aside>
                        <Card className="sticky top-6 border-slate-200 shadow-none dark:border-slate-800">
                            <CardHeader>
                                <CardTitle>Resumo</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-5">
                                <div>
                                    <p className="text-xs text-muted-foreground">
                                        Equipamentos selecionados
                                    </p>
                                    <p className="mt-1 text-2xl font-semibold">
                                        {form.data.asset_ids.length}
                                    </p>
                                </div>
                                <div className="flex items-start gap-3 border-t pt-5">
                                    <Checkbox
                                        id="terms"
                                        checked={form.data.terms_accepted}
                                        onCheckedChange={(value) =>
                                            form.setData(
                                                'terms_accepted',
                                                Boolean(value),
                                            )
                                        }
                                    />
                                    <Label
                                        htmlFor="terms"
                                        className="text-xs leading-5 font-normal"
                                    >
                                        Confirmo que conheço as condições de
                                        utilização e que entregarei os
                                        equipamentos no estado e prazo
                                        acordados.
                                    </Label>
                                </div>
                                <InputError
                                    message={form.errors.terms_accepted}
                                />
                                <Button
                                    type="submit"
                                    className="w-full"
                                    disabled={form.processing}
                                >
                                    <Check />{' '}
                                    {form.processing
                                        ? 'A submeter…'
                                        : 'Submeter para aprovação'}
                                </Button>
                                <p className="text-center text-xs text-muted-foreground">
                                    O equipamento fica pré-reservado até à
                                    decisão.
                                </p>
                            </CardContent>
                        </Card>
                    </aside>
                </form>
            </main>
        </>
    );
}