{/* Header */}

OFFICE CONFIGURATION

Establish global office identification and contact parameters

{/* Form */}

{({ errors, processing }) => (

{/* SECTION: BASIC IDENTITY */} Basic Identity

Office Name *

Physical Address *

Office Logo

Office Description

{/* SECTION: CONTACT CHANNELS */}
                            <Card className="border-2 shadow-sm">
                                <CardHeader className="bg-slate-50/50 border-b">
                                    <CardTitle className="text-sm font-black uppercase tracking-[0.2em] flex items-center gap-3">
                                        <Phone className="w-4 h-4 text-orange-600" />
                                        Contact Channels
                                    </CardTitle>
                                </CardHeader>
                                <CardContent className="p-8">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                        <div className="space-y-2">
                                            <Label htmlFor="office_email" className="text-[10px] font-black uppercase tracking-widest text-slate-500">Official Email</Label>
                                            <Input
                                                id="office_email"
                                                name="office_email"
                                                type="email"
                                                placeholder="e.g. info@jayabageshwori.edu.np"
                                                defaultValue={officeSetting?.office_email}
                                                className="h-12 rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold"
                                            />
                                            <InputError message={errors.office_email} />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="office_phone" className="text-[10px] font-black uppercase tracking-widest text-slate-500">Primary Phone</Label>
                                            <Input
                                                id="office_phone"
                                                name="office_phone"
                                                placeholder="e.g. +977-081-533337"
                                                defaultValue={officeSetting?.office_phone}
                                                className="h-12 rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold"
                                            />
                                            <InputError message={errors.office_phone} />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="office_phone_2" className="text-[10px] font-black uppercase tracking-widest text-slate-500">Secondary Phone</Label>
                                            <Input
                                                id="office_phone_2"
                                                name="office_phone_2"
                                                placeholder="Alternative contact number"
                                                defaultValue={officeSetting?.office_phone_2}
                                                className="h-12 rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold"
                                            />
                                            <InputError message={errors.office_phone_2} />
                                        </div>

<div className="lg:col-span-2 space-y-2">
                                            <Label htmlFor="gmap_url" className="text-[10px] font-black uppercase tracking-widest text-slate-500">Google Maps Embed URL</Label>
                                            <Textarea
                                                id="gmap_url"
                                                name="gmap_url"
                                                placeholder="Enter google maps embed url "
                                                rows={4}
                                                defaultValue={officeSetting?.gmap_url}
                                                className="rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold resize-none"
                                            />
                                            <InputError message={errors.gmap_url} />
                                        </div>
                                    </div>
                                </CardContent>
                            </Card>

{/* SECTION: SOCIAL ASSETS */}
                            <Card className="border-2 shadow-sm">
                                <CardHeader className="bg-slate-50/50 border-b">
                                    <CardTitle className="text-sm font-black uppercase tracking-[0.2em] flex items-center gap-3">
                                        <Share2 className="w-4 h-4 text-emerald-600" />
                                        Social Assets
                                    </CardTitle>
                                </CardHeader>
                                <CardContent className="p-8">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                        <div className="space-y-2">
                                            <Label htmlFor="fb_url" className="text-[10px] font-black uppercase tracking-widest text-slate-500">Facebook URL</Label>
                                            <Input
                                                id="fb_url"
                                                name="fb_url"
                                                defaultValue={officeSetting?.fb_url ?? ""}
                                                className="h-12 rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold"
                                            />
                                            <InputError message={errors.fb_url} />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="insta_url" className="text-[10px] font-black uppercase tracking-widest text-slate-500">Instagram URL</Label>
                                            <Input
                                                id="insta_url"
                                                name="insta_url"
                                                defaultValue={officeSetting?.insta_url ?? ""}
                                                className="h-12 rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold"
                                            />
                                            <InputError message={errors.insta_url} />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="yt_url" className="text-[10px] font-black uppercase tracking-widest text-slate-500">YouTube URL</Label>
                                            <Input
                                                id="yt_url"
                                                name="yt_url"
                                                placeholder="https://youtube.com/..."
                                                defaultValue={officeSetting?.yt_url ?? ""}
                                                className="h-12 rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold"
                                            />
                                            <InputError message={errors.yt_url} />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="titok_url" className="text-[10px] font-black uppercase tracking-widest text-slate-500">TikTok URL</Label>
                                            <Input
                                                id="titok_url"
                                                name="titok_url"
                                                placeholder="https://tiktok.com/@..."
                                                defaultValue={officeSetting?.titok_url ?? ""}
                                                className="h-12 rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold"
                                            />
                                            <InputError message={errors.titok_url} />
                                        </div>
                                    </div>
                                </CardContent>
                            </Card>

{/* key contact */}
                            <Card className="border-2 shadow-sm">
                                <CardHeader className="bg-slate-50/50 border-b">
                                    <CardTitle className="text-sm font-black uppercase tracking-[0.2em] flex items-center gap-3">
                                        <User className="w-4 h-4 text-emerald-600" />
                                        Key Contact Person
                                    </CardTitle>
                                </CardHeader>
                                <CardContent className="p-8">
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                        <div className="space-y-2">
                                            <Label htmlFor="key_contact_person_id">
                                                Founder
                                            </Label>
                                            <select
                                                id="key_contact_person_id"
                                                name="key_contact_person_id"
                                                defaultValue={officeSetting?.key_contact_person_id}
                                                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring"
                                            >
                                                <option value="">Select Key Contact Person</option>
                                                {staffs.map((staff) => (
                                                    <option key={staff.id} value={staff.id}>
                                                        {staff.full_name}
                                                    </option>
                                                ))}
                                            </select>
                                            <InputError message={errors.key_contact_person_id} />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="key_contact_secperson_id">
                                                Principal
                                            </Label>
                                            <select
                                                id="key_contact_secperson_id"
                                                name="key_contact_secperson_id"
                                                defaultValue={officeSetting?.key_contact_secperson_id}
                                                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring"
                                            >
                                                <option value="">Select Key Contact Person</option>
                                                {staffs.map((staff) => (
                                                    <option key={staff.id} value={staff.id}>
                                                        {staff.full_name}
                                                    </option>
                                                ))}
                                            </select>
                                            <InputError message={errors.key_contact_secperson_id} />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="is_admission">
                                                Admission Open
                                            </Label>

<Switch
                                                checked={officeSetting?.is_admission}
                                                onCheckedChange={() =>
                                                    router.get(
                                                        isAdmission(officeSetting.id),
                                                        {},
                                                        {
                                                            preserveScroll: true,
                                                            preserveState: true,
                                                        }
                                                    )
                                                }
                                            />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="is_admission">
                                                Is office Open on Saturday
                                            </Label>

<Switch
                                                checked={officeSetting?.is_open}
                                                onCheckedChange={() =>
                                                    router.get(
                                                        isOpen(officeSetting.id),
                                                        {},
                                                        {
                                                            preserveScroll: true,
                                                            preserveState: true,
                                                        }
                                                    )
                                                }
                                            />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="office_from" className="text-[10px] font-black uppercase tracking-widest text-slate-500">From</Label>
                                            <Input
                                                id="office_from"
                                                name="office_from"
                                                type="time"
                                                defaultValue={officeSetting?.office_from}
                                                className="h-12 rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold"
                                            />
                                            <InputError message={errors.office_from} />
                                        </div>
                                        <div className="space-y-2">
                                            <Label htmlFor="office_to" className="text-[10px] font-black uppercase tracking-widest text-slate-500">TO</Label>
                                            <Input
                                                id="office_to"
                                                name="office_to"
                                                type="time"
                                                defaultValue={officeSetting?.office_to}
                                                className="h-12 rounded-xl border-2 focus-visible:ring-blue-600/10 transition-all font-semibold"
                                            />
                                            <InputError message={errors.office_to} />
                                        </div>

</div>
                                </CardContent>
                            </Card>

{/* SUBMIT ACTIONS */}
                            <div className="flex items-center justify-end gap-4 pt-4 border-t">
                                <Button
                                    type="button"
                                    variant="ghost"
                                    onClick={handleCancel}
                                    className="rounded-full h-14 px-8 font-black uppercase tracking-widest text-xs hover:bg-slate-100 dark:hover:bg-slate-800 transition-all"
                                >
                                    Cancel
                                </Button>
                                <Button
                                    type="submit"
                                    disabled={processing}
                                    className="rounded-full h-14 px-12 font-black uppercase tracking-widest text-xs gap-3 shadow-xl shadow-blue-600/20 active:scale-95 transition-all bg-slate-900 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700"
                                >
                                    {processing ? "SYNCHRONIZING..." : (<><Save className="w-4 h-4" /> SUBMIT CONFIG</>)}
                                </Button>
                            </div>
                        </div>
                    )}
                </Form>
            </div>
        </AppLayout>
    )
}