import { Form, Head } from '@inertiajs/react';
import { useState } from 'react';
import LocationManagementController from '@/actions/App/Http/Controllers/Admin/LocationManagementController';
import StandManagementController from '@/actions/App/Http/Controllers/Admin/StandManagementController';
import StandPhotoController from '@/actions/App/Http/Controllers/StandPhotoController';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';

type Clay = {
    id: number;
    label: string;
    type: string;
    notes: string | null;
};

type Stand = {
    id: number;
    name: string;
    position_label: string | null;
    clays_per_round: number;
    notes: string | null;
    is_active: boolean;
    clays: Clay[];
    photos: StandPhoto[];
};

type StandPhoto = {
    id: number;
    url: string;
    caption: string | null;
    uploaded_at: string | null;
    uploaded_by: string;
};

type Location = {
    id: number;
    name: string;
    town: string;
    region: string;
    description: string | null;
    stands_count: number;
    is_active: boolean;
    stands: Stand[];
};

const clayLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
const clayTypes = [
    'Rabbit',
    'Battue',
    'Driven',
    'Crosser',
    'Teal',
    'Midi',
    'Standard',
    'Incoming',
    'Outgoing',
    'Chandelle',
];

const textAreaClassName =
    'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-24 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]';

type ClayRow = {
    label: string;
    type: string;
    notes: string;
};

function buildClayRows(clays: Clay[] = [], clayCount = 2): ClayRow[] {
    return clayLabels.slice(0, clayCount).map((label, index) => {
        const existingClay = clays.find((clay) => clay.label === label);

        return {
            label,
            type: existingClay?.type ?? clayTypes[Math.min(index, clayTypes.length - 1)],
            notes: existingClay?.notes ?? '',
        };
    });
}

function ClayTable({
    clayCount,
    clays,
    errors,
    prefix,
}: {
    clayCount: number;
    clays: ClayRow[];
    errors: Record<string, string>;
    prefix: string;
}) {
    return (
        <div className="overflow-hidden rounded-2xl border border-border/70">
            <table className="min-w-full text-sm">
                <thead className="bg-muted/30 text-left">
                    <tr>
                        <th className="px-4 py-3 font-medium">Clay</th>
                        <th className="px-4 py-3 font-medium">Type</th>
                        <th className="px-4 py-3 font-medium">Notes</th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-border/70">
                    {clays.slice(0, clayCount).map((clay, index) => (
                        <tr key={`${prefix}-${clay.label}`} className="bg-background">
                            <td className="px-4 py-3 align-top">
                                <div className="rounded-lg bg-primary/10 px-3 py-2 text-center font-semibold text-primary">
                                    {clay.label}
                                </div>
                                <input
                                    type="hidden"
                                    name={`clays[${index}][label]`}
                                    value={clay.label}
                                />
                                <InputError
                                    className="mt-2"
                                    message={errors[`clays.${index}.label`]}
                                />
                            </td>
                            <td className="px-4 py-3 align-top">
                                <select
                                    name={`clays[${index}][type]`}
                                    defaultValue={clay.type}
                                    className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                                >
                                    {clayTypes.map((type) => (
                                        <option key={type} value={type}>
                                            {type}
                                        </option>
                                    ))}
                                </select>
                                <InputError
                                    className="mt-2"
                                    message={errors[`clays.${index}.type`]}
                                />
                            </td>
                            <td className="px-4 py-3 align-top">
                                <Input
                                    name={`clays[${index}][notes]`}
                                    defaultValue={clay.notes}
                                    placeholder="Optional note for this target"
                                />
                                <InputError
                                    className="mt-2"
                                    message={errors[`clays.${index}.notes`]}
                                />
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

function StandEditor({
    stand,
}: {
    stand: Stand;
}) {
    const [clayCount, setClayCount] = useState(
        Math.min(Math.max(stand.clays.length || 2, 2), 10),
    );

    return (
        <Form
            {...StandManagementController.update.form(stand.id)}
            encType="multipart/form-data"
            className="rounded-2xl border border-border/70 bg-muted/15 p-4"
        >
            {({ processing, errors }) => (
                <div className="grid gap-4">
                    <div className="grid gap-4 lg:grid-cols-[1fr_0.5fr_0.45fr]">
                        <div className="grid gap-2">
                            <Label htmlFor={`stand-name-${stand.id}`}>
                                Stand name
                            </Label>
                            <Input
                                id={`stand-name-${stand.id}`}
                                name="name"
                                defaultValue={stand.name}
                            />
                            <InputError message={errors.name} />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor={`stand-position-${stand.id}`}>
                                Position
                            </Label>
                            <Input
                                id={`stand-position-${stand.id}`}
                                name="position_label"
                                type="number"
                                min={1}
                                step={1}
                                defaultValue={stand.position_label ?? ''}
                                placeholder="12"
                            />
                            <InputError message={errors.position_label} />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor={`stand-clay-count-${stand.id}`}>
                                Clay targets
                            </Label>
                            <select
                                id={`stand-clay-count-${stand.id}`}
                                value={clayCount}
                                onChange={(event) =>
                                    setClayCount(Number(event.target.value))
                                }
                                className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                            >
                                {Array.from({ length: 9 }, (_, index) => index + 2).map((count) => (
                                    <option key={count} value={count}>
                                        {count} clays
                                    </option>
                                ))}
                            </select>
                            <InputError message={errors.clays} />
                        </div>
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor={`stand-notes-${stand.id}`}>
                            Stand notes
                        </Label>
                        <textarea
                            id={`stand-notes-${stand.id}`}
                            name="notes"
                            defaultValue={stand.notes ?? ''}
                            className={cn(textAreaClassName, 'min-h-20')}
                        />
                        <InputError message={errors.notes} />
                    </div>

                    <div className="grid gap-3 rounded-2xl border border-border/70 bg-background p-4">
                        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                            <div>
                                <p className="font-medium">Reference images</p>
                                <p className="text-sm text-muted-foreground">
                                    Upload one or more stand photos to keep the visual setup together.
                                </p>
                            </div>
                            <Badge variant="secondary">
                                {stand.photos.length} photos
                            </Badge>
                        </div>

                        {stand.photos.length > 0 ? (
                            <div className="flex gap-3 overflow-x-auto pb-2">
                                {stand.photos.map((photo) => (
                                    <div
                                        key={photo.id}
                                        className="min-w-[160px] max-w-[160px] overflow-hidden rounded-xl border border-border/70 bg-muted/15"
                                    >
                                        <img
                                            src={photo.url}
                                            alt={photo.caption ?? `${stand.name} reference`}
                                            className="h-28 w-full object-cover"
                                        />
                                        <div className="space-y-1 p-3 text-xs text-muted-foreground">
                                            <p className="font-medium text-foreground">
                                                {photo.caption ?? 'Reference image'}
                                            </p>
                                            <p>{photo.uploaded_by}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        ) : (
                            <div className="rounded-xl border border-dashed border-border/70 bg-muted/15 p-3 text-sm text-muted-foreground">
                                No stand photos uploaded yet.
                            </div>
                        )}

                        <div className="grid gap-2">
                            <Label htmlFor={`stand-photos-${stand.id}`}>
                                Add images
                            </Label>
                            <Input
                                id={`stand-photos-${stand.id}`}
                                name="photos[]"
                                type="file"
                                accept="image/*"
                                multiple
                            />
                            <InputError message={errors.photos} />
                        </div>
                    </div>

                    <ClayTable
                        clayCount={clayCount}
                        clays={buildClayRows(stand.clays, clayCount)}
                        errors={errors}
                        prefix={`stand-${stand.id}`}
                    />

                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-background px-4 py-3">
                            <input type="hidden" name="is_active" value="0" />
                            <input
                                id={`stand-active-${stand.id}`}
                                name="is_active"
                                type="checkbox"
                                value="1"
                                defaultChecked={stand.is_active}
                                className="size-4 rounded border-border text-primary focus:ring-primary"
                            />
                            <Label
                                htmlFor={`stand-active-${stand.id}`}
                                className="cursor-pointer"
                            >
                                Active stand
                            </Label>
                        </div>
                        <Button disabled={processing}>Save stand</Button>
                    </div>
                    <InputError message={errors.is_active} />
                </div>
            )}
        </Form>
    );
}

function CreateStandForm({
    locationId,
}: {
    locationId: number;
}) {
    const [clayCount, setClayCount] = useState(2);

    return (
        <Form
            {...StandManagementController.store.form(locationId)}
            encType="multipart/form-data"
            resetOnSuccess={['name', 'position_label', 'notes', 'photos']}
            className="grid gap-4 rounded-2xl border border-dashed border-border/70 bg-background p-4"
        >
            {({ processing, errors }) => (
                <>
                    <div className="grid gap-4 lg:grid-cols-[1fr_0.5fr_0.45fr]">
                        <div className="grid gap-2">
                            <Label htmlFor={`new-stand-name-${locationId}`}>
                                Stand name
                            </Label>
                            <Input
                                id={`new-stand-name-${locationId}`}
                                name="name"
                                placeholder="Stand 5"
                            />
                            <InputError message={errors.name} />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor={`new-position-${locationId}`}>
                                Position
                            </Label>
                            <Input
                                id={`new-position-${locationId}`}
                                name="position_label"
                                type="number"
                                min={1}
                                step={1}
                                placeholder="12"
                            />
                            <InputError message={errors.position_label} />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor={`new-clay-count-${locationId}`}>
                                Clay targets
                            </Label>
                            <select
                                id={`new-clay-count-${locationId}`}
                                value={clayCount}
                                onChange={(event) =>
                                    setClayCount(Number(event.target.value))
                                }
                                className="border-input focus-visible:border-ring focus-visible:ring-ring/50 h-10 w-full rounded-md border bg-transparent px-3 text-sm outline-none focus-visible:ring-[3px]"
                            >
                                {Array.from({ length: 9 }, (_, index) => index + 2).map((count) => (
                                    <option key={count} value={count}>
                                        {count} clays
                                    </option>
                                ))}
                            </select>
                            <InputError message={errors.clays} />
                        </div>
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor={`new-stand-notes-${locationId}`}>
                            Stand notes
                        </Label>
                        <textarea
                            id={`new-stand-notes-${locationId}`}
                            name="notes"
                            className={cn(textAreaClassName, 'min-h-20')}
                            placeholder="General notes for the stand position or trap setup."
                        />
                        <InputError message={errors.notes} />
                    </div>

                    <div className="grid gap-2">
                        <Label htmlFor={`new-stand-photos-${locationId}`}>
                            Reference images
                        </Label>
                        <Input
                            id={`new-stand-photos-${locationId}`}
                            name="photos[]"
                            type="file"
                            accept="image/*"
                            multiple
                        />
                        <p className="text-sm text-muted-foreground">
                            Upload one or more images for the stand layout or clay lines.
                        </p>
                        <InputError message={errors.photos} />
                    </div>

                    <ClayTable
                        clayCount={clayCount}
                        clays={buildClayRows([], clayCount)}
                        errors={errors}
                        prefix={`new-${locationId}`}
                    />

                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-muted/20 px-4 py-3">
                            <input type="hidden" name="is_active" value="0" />
                            <input
                                id={`new-stand-active-${locationId}`}
                                name="is_active"
                                type="checkbox"
                                value="1"
                                defaultChecked={true}
                                className="size-4 rounded border-border text-primary focus:ring-primary"
                            />
                            <Label
                                htmlFor={`new-stand-active-${locationId}`}
                                className="cursor-pointer"
                            >
                                Active stand
                            </Label>
                        </div>
                        <Button disabled={processing}>Add stand</Button>
                    </div>
                    <InputError message={errors.is_active} />
                </>
            )}
        </Form>
    );
}

function StandManagementTable({
    location,
}: {
    location: Location;
}) {
    const [selectedStandId, setSelectedStandId] = useState<number | null>(
        location.stands[0]?.id ?? null,
    );

    const selectedStand =
        location.stands.find((stand) => stand.id === selectedStandId) ??
        location.stands[0] ??
        null;

    return (
        <div className="space-y-4">
            <div>
                <h3 className="font-medium">Stands and clay tables</h3>
                <p className="text-sm text-muted-foreground">
                    Manage each stand from a single table, then open a row below for full clay and image editing.
                </p>
            </div>

            <CreateStandForm locationId={location.id} />

            {location.stands.length > 0 ? (
                <>
                    <div className="overflow-hidden rounded-2xl border border-border/70">
                        <div className="overflow-x-auto">
                            <table className="min-w-full divide-y divide-border/70 text-sm">
                                <thead className="bg-muted/30 text-left">
                                    <tr className="text-muted-foreground">
                                        <th className="px-4 py-3 font-medium">Position</th>
                                        <th className="px-4 py-3 font-medium">Stand</th>
                                        <th className="px-4 py-3 font-medium">Clay setup</th>
                                        <th className="px-4 py-3 font-medium">Photos</th>
                                        <th className="px-4 py-3 font-medium">Status</th>
                                        <th className="px-4 py-3 font-medium">Notes</th>
                                        <th className="px-4 py-3 font-medium">Action</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-border/70 bg-background">
                                    {location.stands.map((stand) => (
                                        <tr
                                            key={stand.id}
                                            className={cn(
                                                'align-top',
                                                selectedStand?.id === stand.id &&
                                                    'bg-muted/10',
                                            )}
                                        >
                                            <td className="px-4 py-4 font-semibold text-foreground">
                                                {stand.position_label ?? 'No position'}
                                            </td>
                                            <td className="px-4 py-4">
                                                <div className="space-y-1">
                                                    <p className="font-medium text-foreground">
                                                        {stand.name}
                                                    </p>
                                                    <p className="text-xs text-muted-foreground">
                                                        {stand.clays_per_round} clay
                                                        {stand.clays_per_round === 1 ? '' : 's'}
                                                    </p>
                                                </div>
                                            </td>
                                            <td className="px-4 py-4">
                                                <div className="flex flex-wrap gap-2">
                                                    {stand.clays.map((clay) => (
                                                        <Badge
                                                            key={clay.id}
                                                            variant="secondary"
                                                            className="gap-1"
                                                        >
                                                            {clay.label}: {clay.type}
                                                        </Badge>
                                                    ))}
                                                </div>
                                            </td>
                                            <td className="px-4 py-4">
                                                <div className="space-y-3">
                                                    <Badge variant="secondary">
                                                        {stand.photos.length} photo
                                                        {stand.photos.length === 1 ? '' : 's'}
                                                    </Badge>
                                                    {stand.photos.length > 0 ? (
                                                        <div className="flex -space-x-3">
                                                            {stand.photos
                                                                .slice(0, 3)
                                                                .map((photo) => (
                                                                    <img
                                                                        key={photo.id}
                                                                        src={photo.url}
                                                                        alt={photo.caption ?? `${stand.name} reference`}
                                                                        className="size-10 rounded-full border-2 border-background object-cover"
                                                                    />
                                                                ))}
                                                        </div>
                                                    ) : null}
                                                </div>
                                            </td>
                                            <td className="px-4 py-4">
                                                <Badge
                                                    className={
                                                        stand.is_active
                                                            ? 'bg-emerald-600/10 text-emerald-700 hover:bg-emerald-600/10 dark:text-emerald-300'
                                                            : 'bg-muted text-muted-foreground hover:bg-muted'
                                                    }
                                                >
                                                    {stand.is_active ? 'Active' : 'Inactive'}
                                                </Badge>
                                            </td>
                                            <td className="px-4 py-4 text-muted-foreground">
                                                {stand.notes ?? 'No notes added'}
                                            </td>
                                            <td className="px-4 py-4">
                                                <Button
                                                    type="button"
                                                    variant={
                                                        selectedStand?.id === stand.id
                                                            ? 'secondary'
                                                            : 'outline'
                                                    }
                                                    onClick={() => setSelectedStandId(stand.id)}
                                                >
                                                    {selectedStand?.id === stand.id
                                                        ? 'Editing'
                                                        : 'Edit stand'}
                                                </Button>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {selectedStand ? (
                        <div className="space-y-3">
                            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                <div>
                                    <h4 className="font-medium">
                                        Edit {selectedStand.name}
                                    </h4>
                                    <p className="text-sm text-muted-foreground">
                                        Update the clay table, stand status, notes, and image set for this position.
                                    </p>
                                </div>
                                <Form
                                    {...StandPhotoController.store.form(selectedStand.id)}
                                    encType="multipart/form-data"
                                    className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-muted/15 p-3 sm:flex-row sm:items-end"
                                >
                                    {({ processing, errors }) => (
                                        <>
                                            <div className="grid gap-2">
                                                <Label htmlFor={`quick-photos-${selectedStand.id}`}>
                                                    Quick add photos
                                                </Label>
                                                <Input
                                                    id={`quick-photos-${selectedStand.id}`}
                                                    name="photos[]"
                                                    type="file"
                                                    accept="image/*"
                                                    multiple
                                                />
                                                <InputError message={errors.photos} />
                                            </div>
                                            <Button disabled={processing}>
                                                Upload photos
                                            </Button>
                                        </>
                                    )}
                                </Form>
                            </div>

                            <StandEditor key={selectedStand.id} stand={selectedStand} />
                        </div>
                    ) : null}
                </>
            ) : (
                <div className="rounded-2xl border border-dashed border-border/70 bg-muted/15 p-4 text-sm text-muted-foreground">
                    No stands added yet. Use the form above to create the first stand for this location.
                </div>
            )}
        </div>
    );
}

export default function AdminLocationsIndex({
    locations,
}: {
    locations: Location[];
}) {
    return (
        <>
            <Head title="Manage locations" />

            <div className="space-y-6 p-4 md:p-6">
                <Heading
                    title="Location management"
                    description="Capture the venues, stands, and clay tables that will drive your scoring workflow."
                />

                <div className="grid gap-6 xl:grid-cols-[0.8fr_1.2fr]">
                    <Card className="border-border/70">
                        <CardHeader>
                            <CardTitle>Add a location</CardTitle>
                            <CardDescription>
                                Create the ground first, then add stands and clay tables beneath it.
                            </CardDescription>
                        </CardHeader>
                        <CardContent>
                            <Form
                                {...LocationManagementController.store.form()}
                                resetOnSuccess={[
                                    'name',
                                    'town',
                                    'region',
                                    'description',
                                ]}
                                className="space-y-4"
                            >
                                {({ processing, errors }) => (
                                    <>
                                        <div className="grid gap-2">
                                            <Label htmlFor="location-name">
                                                Location name
                                            </Label>
                                            <Input
                                                id="location-name"
                                                name="name"
                                                placeholder="North Course"
                                            />
                                            <InputError message={errors.name} />
                                        </div>
                                        <div className="grid gap-4 sm:grid-cols-2">
                                            <div className="grid gap-2">
                                                <Label htmlFor="location-town">
                                                    Town / city
                                                </Label>
                                                <Input
                                                    id="location-town"
                                                    name="town"
                                                    placeholder="Pine Ridge"
                                                />
                                                <InputError
                                                    message={errors.town}
                                                />
                                            </div>
                                            <div className="grid gap-2">
                                                <Label htmlFor="location-region">
                                                    State / region
                                                </Label>
                                                <Input
                                                    id="location-region"
                                                    name="region"
                                                    placeholder="South Dakota"
                                                />
                                                <InputError
                                                    message={errors.region}
                                                />
                                            </div>
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="location-description">
                                                Course notes
                                            </Label>
                                            <textarea
                                                id="location-description"
                                                name="description"
                                                className={textAreaClassName}
                                                placeholder="Woodland loop with mixed driven and rabbit targets."
                                            />
                                            <InputError
                                                message={errors.description}
                                            />
                                        </div>
                                        <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-muted/20 px-4 py-3">
                                            <input
                                                type="hidden"
                                                name="is_active"
                                                value="0"
                                            />
                                            <input
                                                id="location-active"
                                                name="is_active"
                                                type="checkbox"
                                                value="1"
                                                defaultChecked={true}
                                                className="size-4 rounded border-border text-primary focus:ring-primary"
                                            />
                                            <Label
                                                htmlFor="location-active"
                                                className="cursor-pointer"
                                            >
                                                Mark this location active
                                            </Label>
                                        </div>
                                        <InputError
                                            message={errors.is_active}
                                        />
                                        <Button
                                            disabled={processing}
                                            className="w-full sm:w-auto"
                                        >
                                            Create location
                                        </Button>
                                    </>
                                )}
                            </Form>
                        </CardContent>
                    </Card>

                    <div className="space-y-4">
                        {locations.map((location) => (
                            <Card
                                key={location.id}
                                className="border-border/70"
                            >
                                <CardHeader className="gap-4">
                                    <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                                        <div>
                                            <CardTitle>{location.name}</CardTitle>
                                            <CardDescription>
                                                {location.town}, {location.region}
                                            </CardDescription>
                                        </div>
                                        <div className="flex gap-2">
                                            <Badge variant="secondary">
                                                {location.stands_count} stands
                                            </Badge>
                                            <Badge
                                                className={
                                                    location.is_active
                                                        ? 'bg-emerald-600/10 text-emerald-700 hover:bg-emerald-600/10 dark:text-emerald-300'
                                                        : 'bg-muted text-muted-foreground hover:bg-muted'
                                                }
                                            >
                                                {location.is_active
                                                    ? 'Active'
                                                    : 'Inactive'}
                                            </Badge>
                                        </div>
                                    </div>
                                </CardHeader>
                                <CardContent className="space-y-6">
                                    <Form
                                        {...LocationManagementController.update.form(
                                            location.id,
                                        )}
                                        className="space-y-4 rounded-2xl border border-border/70 bg-muted/15 p-4"
                                    >
                                        {({ processing, errors }) => (
                                            <>
                                                <div className="grid gap-4 lg:grid-cols-2">
                                                    <div className="grid gap-2">
                                                        <Label
                                                            htmlFor={`location-name-${location.id}`}
                                                        >
                                                            Location name
                                                        </Label>
                                                        <Input
                                                            id={`location-name-${location.id}`}
                                                            name="name"
                                                            defaultValue={
                                                                location.name
                                                            }
                                                        />
                                                        <InputError
                                                            message={errors.name}
                                                        />
                                                    </div>
                                                    <div className="grid gap-2">
                                                        <Label
                                                            htmlFor={`location-town-${location.id}`}
                                                        >
                                                            Town / city
                                                        </Label>
                                                        <Input
                                                            id={`location-town-${location.id}`}
                                                            name="town"
                                                            defaultValue={
                                                                location.town
                                                            }
                                                        />
                                                        <InputError
                                                            message={errors.town}
                                                        />
                                                    </div>
                                                </div>
                                                <div className="grid gap-4 lg:grid-cols-[0.7fr_1.3fr]">
                                                    <div className="grid gap-2">
                                                        <Label
                                                            htmlFor={`location-region-${location.id}`}
                                                        >
                                                            State / region
                                                        </Label>
                                                        <Input
                                                            id={`location-region-${location.id}`}
                                                            name="region"
                                                            defaultValue={
                                                                location.region
                                                            }
                                                        />
                                                        <InputError
                                                            message={
                                                                errors.region
                                                            }
                                                        />
                                                    </div>
                                                    <div className="grid gap-2">
                                                        <Label
                                                            htmlFor={`location-description-${location.id}`}
                                                        >
                                                            Course notes
                                                        </Label>
                                                        <textarea
                                                            id={`location-description-${location.id}`}
                                                            name="description"
                                                            defaultValue={
                                                                location.description ??
                                                                ''
                                                            }
                                                            className={
                                                                textAreaClassName
                                                            }
                                                        />
                                                        <InputError
                                                            message={
                                                                errors.description
                                                            }
                                                        />
                                                    </div>
                                                </div>
                                                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                                    <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-background px-4 py-3">
                                                        <input
                                                            type="hidden"
                                                            name="is_active"
                                                            value="0"
                                                        />
                                                        <input
                                                            id={`location-active-${location.id}`}
                                                            name="is_active"
                                                            type="checkbox"
                                                            value="1"
                                                            defaultChecked={
                                                                location.is_active
                                                            }
                                                            className="size-4 rounded border-border text-primary focus:ring-primary"
                                                        />
                                                        <Label
                                                            htmlFor={`location-active-${location.id}`}
                                                            className="cursor-pointer"
                                                        >
                                                            Active location
                                                        </Label>
                                                    </div>
                                                    <Button
                                                        disabled={processing}
                                                    >
                                                        Save location
                                                    </Button>
                                                </div>
                                                <InputError
                                                    message={errors.is_active}
                                                />
                                            </>
                                        )}
                                    </Form>

                                    <StandManagementTable location={location} />
                                </CardContent>
                            </Card>
                        ))}
                    </div>
                </div>
            </div>
        </>
    );
}

AdminLocationsIndex.layout = {
    breadcrumbs: [
        {
            title: 'Dashboard',
            href: '/dashboard',
        },
        {
            title: 'Locations',
            href: LocationManagementController.index(),
        },
    ],
};