import React, { useState } from "react";
import { Head, useForm, router as Inertia, Link } from "@inertiajs/react";
import {
    PlusIcon,
    Pencil,
    Trash2,
    Eye,
    FileSpreadsheet,
    Download,
} from "lucide-react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Button } from "@/Components/ui/button";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/Components/ui/dialog";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/Components/ui/select";
import { RadioGroup, RadioGroupItem } from "@/Components/ui/radio-group";
import Pagination from "@/Components/Pagination";

export default function Index({ orders, clients, filters, flash }) {
    // console.log("Received props:", { orders });

    const [open, setOpen] = useState(false);
    const [viewOpen, setViewOpen] = useState(false);
    const [editMode, setEditMode] = useState(false);
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
    const [alertOpen, setAlertOpen] = useState(
        !!flash?.success || !!flash?.error
    );
    const [viewingOrder, setViewingOrder] = useState(null);
    const [clientType, setClientType] = useState("existing");

    // Extract the orders data from the paginated response
    const ordersData = orders?.data || [];
    // console.log("Orders data structure:", {
    //     hasOrders: !!orders,
    //     hasData: !!orders?.data,
    //     dataLength: orders?.data?.length,
    //     fullOrders: orders,
    // });
    const { data, setData, post, processing, errors, reset, clearErrors } =
        useForm({
            id: "",
            client_id: "",
            title: "",
            description: "",
            amount: "",
            status: "pending",
            client_type: "existing", // Include client_type in the form data
            // New client fields
            new_client_name: "",
            new_client_email: "",
            new_client_phone: "",
            new_client_company: "",
            new_client_address: "",
        });
    const openAddDialog = () => {
        reset();
        // Default to existing client selection for new orders
        setClientType("existing");
        setData({
            id: "",
            client_id: "",
            title: "",
            description: "",
            amount: "",
            status: "pending",
            // New client fields
            new_client_name: "",
            new_client_email: "",
            new_client_phone: "",
            new_client_company: "",
            new_client_address: "",
            client_type: "existing", // Explicitly set client_type in the form data
        });
        setEditMode(false);
        setOpen(true);
    };
    const openEditDialog = (order) => {
        // console.log("Editing order:", order);
        // Always use existing client for edit
        setClientType("existing");
        setData({
            id: order.id,
            client_id: String(order.client_id),
            title: order.title,
            description: order.description || "",
            amount: order.amount,
            status: order.status,
            client_type: "existing",
            // Reset new client fields
            new_client_name: "",
            new_client_email: "",
            new_client_phone: "",
            new_client_company: "",
            new_client_address: "",
        });
        setEditMode(true);
        setOpen(true);
    };

    const openViewDialog = (order) => {
        setViewingOrder(order);
        setViewOpen(true);
    };

    const openDeleteDialog = (order) => {
        setData({ id: order.id, title: order.title });
        setDeleteDialogOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
        clearErrors();
    };

    const handleViewClose = () => {
        setViewOpen(false);
        setViewingOrder(null);
    };

    const handleDeleteClose = () => {
        setDeleteDialogOpen(false);
    };

    const formatCurrency = (amount) => {
        return new Intl.NumberFormat("en-US", {
            style: "currency",
            currency: "USD",
        }).format(amount);
    };

    const getStatusClass = (status) => {
        switch (status) {
            case "pending":
                return "bg-yellow-100 text-yellow-800";
            case "processing":
                return "bg-blue-100 text-blue-800";
            case "completed":
                return "bg-green-100 text-green-800";
            case "cancelled":
                return "bg-red-100 text-red-800";
            default:
                return "bg-gray-100 text-gray-800";
        }
    };
    const handleSubmit = (e) => {
        e.preventDefault();

        // Always make sure client_type is set correctly before submitting
        setData("client_type", clientType);

        if (editMode) {
            post(route("order.update", data.id), {
                onSuccess: () => {
                    setOpen(false);
                    setAlertOpen(true);
                },
                onError: (errors) => {
                    console.error("Update errors:", errors);
                },
            });
        } else {
            post(route("order.store"), {
                onSuccess: (page) => {
                    // console.log("Create success, page:", page);
                    setOpen(false);
                    setAlertOpen(true);
                },
                onError: (errors) => {
                    console.error("Create errors:", errors);
                },
            });
        }
    };

    const handleDelete = () => {
        Inertia.delete(route("order.delete", data.id), {
            onSuccess: () => {
                setDeleteDialogOpen(false);
                setAlertOpen(true);
            },
        });
    };

    return (
        <AuthenticatedLayout
            header={
                <h2 className="text-xl font-semibold leading-tight text-gray-800">
                    Order Management
                </h2>
            }
        >
            <Head title="Order Management" />
            <div className="py-12">
                <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div className="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                        <div className="p-6">
                            <div className="mb-6 flex items-center justify-between">
                                <h3 className="text-lg font-medium">Orders</h3>
                                <div className="flex space-x-2">
                                    <Button
                                        variant="outline"
                                        className="flex items-center"
                                        onClick={() =>
                                            (window.location.href = route(
                                                "excel.orders.export"
                                            ))
                                        }
                                    >
                                        <FileSpreadsheet className="mr-2 h-4 w-4" />
                                        Export to Excel
                                    </Button>
                                    <Button onClick={openAddDialog}>
                                        <PlusIcon className="mr-2 h-4 w-4" />
                                        Add Order
                                    </Button>
                                </div>
                            </div>

                            <div className="rounded-md border">
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead>No.</TableHead>
                                            <TableHead>Title</TableHead>
                                            <TableHead>Client</TableHead>
                                            <TableHead>Amount</TableHead>
                                            <TableHead>Status</TableHead>
                                            <TableHead>Created By</TableHead>
                                            <TableHead className="w-[150px]">
                                                Actions
                                            </TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {ordersData.length > 0 ? (
                                            ordersData.map((order, index) => (
                                                <TableRow key={order.id}>
                                                    <TableCell className="font-medium">
                                                        {index + 1}
                                                    </TableCell>
                                                    <TableCell>
                                                        {order.title}
                                                    </TableCell>
                                                    <TableCell>
                                                        {order.client.name}
                                                    </TableCell>
                                                    <TableCell>
                                                        {formatCurrency(
                                                            order.amount
                                                        )}
                                                    </TableCell>
                                                    <TableCell>
                                                        <span
                                                            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getStatusClass(
                                                                order.status
                                                            )}`}
                                                        >
                                                            {order.status
                                                                .charAt(0)
                                                                .toUpperCase() +
                                                                order.status.slice(
                                                                    1
                                                                )}
                                                        </span>
                                                    </TableCell>
                                                    <TableCell>
                                                        {order.created_by.name}
                                                    </TableCell>
                                                    <TableCell>
                                                        <div className="flex space-x-2">
                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                onClick={() =>
                                                                    openViewDialog(
                                                                        order
                                                                    )
                                                                }
                                                            >
                                                                <Eye className="h-4 w-4" />
                                                            </Button>
                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                onClick={() =>
                                                                    openEditDialog(
                                                                        order
                                                                    )
                                                                }
                                                            >
                                                                <Pencil className="h-4 w-4" />
                                                            </Button>
                                                            <Button
                                                                variant="ghost"
                                                                size="icon"
                                                                className="text-red-500 hover:text-red-600"
                                                                onClick={() =>
                                                                    openDeleteDialog(
                                                                        order
                                                                    )
                                                                }
                                                            >
                                                                <Trash2 className="h-4 w-4" />
                                                            </Button>
                                                        </div>
                                                    </TableCell>
                                                </TableRow>
                                            ))
                                        ) : (
                                            <TableRow>
                                                <TableCell
                                                    colSpan={7}
                                                    className="h-24 text-center text-muted-foreground"
                                                >
                                                    No orders found
                                                </TableCell>
                                            </TableRow>
                                        )}
                                    </TableBody>
                                </Table>
                            </div>
                            {orders?.meta?.links && (
                                <Pagination links={orders.meta.links} />
                            )}
                        </div>
                    </div>
                </div>
            </div>
            {/* Add/Edit Dialog */}
            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent>
                    <form onSubmit={handleSubmit}>
                        <DialogHeader>
                            <DialogTitle>
                                {editMode ? "Edit Order" : "Add New Order"}
                            </DialogTitle>
                            <DialogDescription>
                                Fill in the details for the order below.
                            </DialogDescription>
                        </DialogHeader>
                        <div className="grid gap-4 py-4">
                            {!editMode && (
                                <div className="grid gap-2">
                                    <Label>Client Type</Label>
                                    <RadioGroup
                                        value={clientType}
                                        onValueChange={(value) => {
                                            setClientType(value);
                                            setData("client_type", value);
                                        }}
                                        className="flex space-x-6"
                                    >
                                        <div className="flex items-center space-x-2">
                                            <RadioGroupItem
                                                value="existing"
                                                id="existing"
                                            />
                                            <Label
                                                htmlFor="existing"
                                                className="cursor-pointer"
                                            >
                                                Existing Client
                                            </Label>
                                        </div>
                                        <div className="flex items-center space-x-2">
                                            <RadioGroupItem
                                                value="new"
                                                id="new"
                                            />
                                            <Label
                                                htmlFor="new"
                                                className="cursor-pointer"
                                            >
                                                New Client
                                            </Label>
                                        </div>
                                    </RadioGroup>
                                </div>
                            )}

                            {clientType === "existing" ? (
                                <div className="grid gap-2">
                                    <Label htmlFor="client_id">
                                        Select Client
                                    </Label>
                                    <Select
                                        value={data.client_id}
                                        onValueChange={(value) =>
                                            setData("client_id", value)
                                        }
                                        disabled={editMode}
                                    >
                                        <SelectTrigger
                                            id="client_id"
                                            className={
                                                errors.client_id
                                                    ? "border-red-500"
                                                    : ""
                                            }
                                        >
                                            <SelectValue placeholder="Select a client" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {clients.map((client) => (
                                                <SelectItem
                                                    key={client.id}
                                                    value={String(client.id)}
                                                >
                                                    {client.name}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    {errors.client_id && (
                                        <p className="text-xs text-red-500">
                                            {errors.client_id}
                                        </p>
                                    )}
                                </div>
                            ) : (
                                <div className="grid gap-4 border rounded-md p-4 bg-gray-50">
                                    <h4 className="font-medium">
                                        New Client Information
                                    </h4>
                                    <div className="grid gap-2">
                                        <Label htmlFor="new_client_name">
                                            Name
                                        </Label>
                                        <Input
                                            id="new_client_name"
                                            value={data.new_client_name}
                                            onChange={(e) =>
                                                setData(
                                                    "new_client_name",
                                                    e.target.value
                                                )
                                            }
                                            className={
                                                errors.new_client_name
                                                    ? "border-red-500"
                                                    : ""
                                            }
                                        />
                                        {errors.new_client_name && (
                                            <p className="text-xs text-red-500">
                                                {errors.new_client_name}
                                            </p>
                                        )}
                                    </div>
                                    <div className="grid gap-2">
                                        <Label htmlFor="new_client_email">
                                            Email
                                        </Label>
                                        <Input
                                            id="new_client_email"
                                            type="email"
                                            value={data.new_client_email}
                                            onChange={(e) =>
                                                setData(
                                                    "new_client_email",
                                                    e.target.value
                                                )
                                            }
                                            className={
                                                errors.new_client_email
                                                    ? "border-red-500"
                                                    : ""
                                            }
                                        />
                                        {errors.new_client_email && (
                                            <p className="text-xs text-red-500">
                                                {errors.new_client_email}
                                            </p>
                                        )}
                                    </div>
                                    <div className="grid gap-2">
                                        <Label htmlFor="new_client_phone">
                                            Phone
                                        </Label>
                                        <Input
                                            id="new_client_phone"
                                            value={data.new_client_phone}
                                            onChange={(e) =>
                                                setData(
                                                    "new_client_phone",
                                                    e.target.value
                                                )
                                            }
                                            className={
                                                errors.new_client_phone
                                                    ? "border-red-500"
                                                    : ""
                                            }
                                        />
                                        {errors.new_client_phone && (
                                            <p className="text-xs text-red-500">
                                                {errors.new_client_phone}
                                            </p>
                                        )}
                                    </div>
                                    <div className="grid gap-2">
                                        <Label htmlFor="new_client_company">
                                            Company
                                        </Label>
                                        <Input
                                            id="new_client_company"
                                            value={data.new_client_company}
                                            onChange={(e) =>
                                                setData(
                                                    "new_client_company",
                                                    e.target.value
                                                )
                                            }
                                            className={
                                                errors.new_client_company
                                                    ? "border-red-500"
                                                    : ""
                                            }
                                        />
                                        {errors.new_client_company && (
                                            <p className="text-xs text-red-500">
                                                {errors.new_client_company}
                                            </p>
                                        )}
                                    </div>
                                    <div className="grid gap-2">
                                        <Label htmlFor="new_client_address">
                                            Address
                                        </Label>
                                        <Textarea
                                            id="new_client_address"
                                            value={data.new_client_address}
                                            onChange={(e) =>
                                                setData(
                                                    "new_client_address",
                                                    e.target.value
                                                )
                                            }
                                            className={
                                                errors.new_client_address
                                                    ? "border-red-500"
                                                    : ""
                                            }
                                        />
                                        {errors.new_client_address && (
                                            <p className="text-xs text-red-500">
                                                {errors.new_client_address}
                                            </p>
                                        )}
                                    </div>
                                </div>
                            )}
                            <div className="grid gap-2">
                                <Label htmlFor="title">Title</Label>
                                <Input
                                    id="title"
                                    value={data.title}
                                    onChange={(e) =>
                                        setData("title", e.target.value)
                                    }
                                    className={
                                        errors.title ? "border-red-500" : ""
                                    }
                                />
                                {errors.title && (
                                    <p className="text-xs text-red-500">
                                        {errors.title}
                                    </p>
                                )}
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="amount">Amount</Label>
                                <Input
                                    id="amount"
                                    type="number"
                                    step="0.01"
                                    min="0"
                                    value={data.amount}
                                    onChange={(e) =>
                                        setData("amount", e.target.value)
                                    }
                                    className={
                                        errors.amount ? "border-red-500" : ""
                                    }
                                />
                                {errors.amount && (
                                    <p className="text-xs text-red-500">
                                        {errors.amount}
                                    </p>
                                )}
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="status">Status</Label>
                                <Select
                                    value={data.status}
                                    onValueChange={(value) =>
                                        setData("status", value)
                                    }
                                >
                                    <SelectTrigger
                                        id="status"
                                        className={
                                            errors.status
                                                ? "border-red-500"
                                                : ""
                                        }
                                    >
                                        <SelectValue placeholder="Select a status" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="pending">
                                            Pending
                                        </SelectItem>
                                        <SelectItem value="processing">
                                            Processing
                                        </SelectItem>
                                        <SelectItem value="completed">
                                            Completed
                                        </SelectItem>
                                        <SelectItem value="cancelled">
                                            Cancelled
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                                {errors.status && (
                                    <p className="text-xs text-red-500">
                                        {errors.status}
                                    </p>
                                )}
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="description">Description</Label>
                                <Textarea
                                    id="description"
                                    value={data.description}
                                    onChange={(e) =>
                                        setData("description", e.target.value)
                                    }
                                    className={
                                        errors.description
                                            ? "border-red-500"
                                            : ""
                                    }
                                />
                                {errors.description && (
                                    <p className="text-xs text-red-500">
                                        {errors.description}
                                    </p>
                                )}
                            </div>
                        </div>
                        <DialogFooter>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={handleClose}
                                className="mr-2"
                            >
                                Cancel
                            </Button>
                            <Button type="submit" disabled={processing}>
                                {editMode ? "Update" : "Save"}
                            </Button>
                        </DialogFooter>
                    </form>
                </DialogContent>
            </Dialog>
            {/* View Order Dialog */}
            <Dialog open={viewOpen} onOpenChange={setViewOpen}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Order Details</DialogTitle>
                    </DialogHeader>
                    {viewingOrder && (
                        <div className="grid gap-4 py-4">
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <h4 className="text-sm font-medium text-gray-500">
                                        ID
                                    </h4>
                                    <p>{viewingOrder.id}</p>
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-gray-500">
                                        Client
                                    </h4>
                                    <p>{viewingOrder.client.name}</p>
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-gray-500">
                                        Title
                                    </h4>
                                    <p>{viewingOrder.title}</p>
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-gray-500">
                                        Amount
                                    </h4>
                                    <p>{formatCurrency(viewingOrder.amount)}</p>
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-gray-500">
                                        Status
                                    </h4>
                                    <span
                                        className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getStatusClass(
                                            viewingOrder.status
                                        )}`}
                                    >
                                        {viewingOrder.status
                                            .charAt(0)
                                            .toUpperCase() +
                                            viewingOrder.status.slice(1)}
                                    </span>
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-gray-500">
                                        Created By
                                    </h4>
                                    <p>{viewingOrder.created_by.name}</p>
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-gray-500">
                                        Created At
                                    </h4>
                                    <p>{viewingOrder.created_at}</p>
                                </div>
                                <div>
                                    <h4 className="text-sm font-medium text-gray-500">
                                        Updated At
                                    </h4>
                                    <p>{viewingOrder.updated_at}</p>
                                </div>
                            </div>
                            <div>
                                <h4 className="text-sm font-medium text-gray-500">
                                    Description
                                </h4>
                                <p className="whitespace-pre-wrap">
                                    {viewingOrder.description}
                                </p>
                            </div>
                        </div>
                    )}
                    <DialogFooter>
                        <Button onClick={handleViewClose}>Close</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
            {/* Delete Confirmation Dialog */}
            <AlertDialog
                open={deleteDialogOpen}
                onOpenChange={setDeleteDialogOpen}
            >
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Confirm Delete</AlertDialogTitle>
                        <AlertDialogDescription>
                            Are you sure you want to delete order "{data.title}
                            "? This action cannot be undone.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel onClick={handleDeleteClose}>
                            Cancel
                        </AlertDialogCancel>
                        <AlertDialogAction
                            onClick={handleDelete}
                            className="bg-red-500 text-white hover:bg-red-600"
                            disabled={processing}
                        >
                            Delete
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
            {/* Flash Message */}
            {flash?.success && alertOpen && (
                <div className="fixed right-4 top-4 z-50 rounded-md bg-green-100 p-4 shadow-md">
                    <div className="flex">
                        <div className="flex-shrink-0">
                            <svg
                                className="h-5 w-5 text-green-400"
                                viewBox="0 0 20 20"
                                fill="currentColor"
                            >
                                <path
                                    fillRule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                    clipRule="evenodd"
                                />
                            </svg>
                        </div>
                        <div className="ml-3">
                            <p className="text-sm font-medium text-green-800">
                                {flash.success}
                            </p>
                        </div>
                        <div className="ml-auto pl-3">
                            <div className="-mx-1.5 -my-1.5">
                                <button
                                    onClick={() => setAlertOpen(false)}
                                    className="inline-flex rounded-md bg-green-100 p-1.5 text-green-500 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2 focus:ring-offset-green-100"
                                >
                                    <span className="sr-only">Dismiss</span>
                                    <svg
                                        className="h-5 w-5"
                                        viewBox="0 0 20 20"
                                        fill="currentColor"
                                    >
                                        <path
                                            fillRule="evenodd"
                                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                            clipRule="evenodd"
                                        />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
            {/* Error Message */}
            {flash?.error && alertOpen && (
                <div className="fixed right-4 top-4 z-50 rounded-md bg-red-100 p-4 shadow-md">
                    <div className="flex">
                        <div className="flex-shrink-0">
                            <svg
                                className="h-5 w-5 text-red-400"
                                viewBox="0 0 20 20"
                                fill="currentColor"
                            >
                                <path
                                    fillRule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                    clipRule="evenodd"
                                />
                            </svg>
                        </div>
                        <div className="ml-3">
                            <p className="text-sm font-medium text-red-800">
                                {flash.error}
                            </p>
                        </div>
                        <div className="ml-auto pl-3">
                            <div className="-mx-1.5 -my-1.5">
                                <button
                                    onClick={() => setAlertOpen(false)}
                                    className="inline-flex rounded-md bg-red-100 p-1.5 text-red-500 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 focus:ring-offset-red-100"
                                >
                                    <span className="sr-only">Dismiss</span>
                                    <svg
                                        className="h-5 w-5"
                                        viewBox="0 0 20 20"
                                        fill="currentColor"
                                    >
                                        <path
                                            fillRule="evenodd"
                                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                            clipRule="evenodd"
                                        />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </AuthenticatedLayout>
    );
}