import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { PageProps } from "@/types";
import InputLabel from "@/Components/InputLabel";
import TextInput from "@/Components/TextInput";
import { Head, useForm } from "@inertiajs/react";
import Checkbox from "@/Components/Checkbox";
import InputError from "@/Components/InputError";
import PrimaryButton from "@/Components/PrimaryButton";

export default function Create({ auth }: PageProps) {
    const { data, setData, post, processing, errors, reset } = useForm({
        full_name: "",
        email: "",
        is_admin: false,
        phone_number: "",
        billing_name: "",
        billing_zip: "",
        billing_city: "",
        billing_address: "",
        tax_number: "",
    });

    function handleSubmit(e: any) {
        e.preventDefault();
        post(route("admin.users.store"));
    }

    return (
        <AuthenticatedLayout user={auth.user} header={"Felhasználó létrehozás"} processing={processing}>
            <Head title="Felhasználó létrehozás" />

            <form onSubmit={handleSubmit} className="space-y-6 m-2">
                <div className="max-w-7xl mx-auto p-6 bg-babolygo-ocean rounded-lg shadow-md">
                    {/* Általános információk */}
                    <h1 className="font-semibold text-xl mb-4 text-babolygo-pink">
                        Általános információk:
                    </h1>
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <InputLabel
                                htmlFor="full_name"
                                value="Teljes név"
                            />
                            <TextInput
                                id="full_name"
                                type="text"
                                name="full_name"
                                className="mt-1 block w-full"
                                value={data.full_name}
                                onChange={(e) =>
                                    setData("full_name", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.full_name}
                                className="mt-2"
                            />
                        </div>

                        <div>
                            <InputLabel htmlFor="email" value="E-mail cím" />
                            <TextInput
                                id="email"
                                type="email"
                                name="email"
                                className="mt-1 block w-full"
                                value={data.email}
                                onChange={(e) =>
                                    setData("email", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.email}
                                className="mt-2"
                            />
                        </div>

                        <div>
                            <InputLabel
                                htmlFor="phone_number"
                                value="Telefonszám"
                            />
                            <TextInput
                                id="phone_number"
                                type="text"
                                name="phone_number"
                                className="mt-1 block w-full"
                                value={data.phone_number}
                                onChange={(e) =>
                                    setData("phone_number", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.phone_number}
                                className="mt-2"
                            />
                        </div>
                    </div>
                    {/* Számlázási adatok */}
                    <h1 className="font-semibold text-xl mb-4 mt-4 text-babolygo-pink">
                        Számlázási adatok:
                    </h1>

                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <InputLabel
                                htmlFor="billing_name"
                                value="Számlázási Név"
                            />
                            <TextInput
                                id="billing_name"
                                type="text"
                                name="billing_name"
                                className="mt-1 block w-full"
                                value={data.billing_name}
                                onChange={(e) =>
                                    setData("billing_name", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.billing_name}
                                className="mt-2"
                            />
                        </div>

                        <div>
                            <InputLabel
                                htmlFor="billing_zip"
                                value="Irányítószám"
                            />
                            <TextInput
                                id="billing_zip"
                                type="text"
                                name="billing_zip"
                                className="mt-1 block w-full"
                                value={data.billing_zip}
                                onChange={(e) =>
                                    setData("billing_zip", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.billing_zip}
                                className="mt-2"
                            />
                        </div>

                        <div>
                            <InputLabel htmlFor="billing_city" value="Város" />
                            <TextInput
                                id="billing_city"
                                type="text"
                                name="billing_city"
                                className="mt-1 block w-full"
                                value={data.billing_city}
                                onChange={(e) =>
                                    setData("billing_city", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.billing_city}
                                className="mt-2"
                            />
                        </div>

                        <div>
                            <InputLabel htmlFor="billing_address" value="Cím" />
                            <TextInput
                                id="billing_address"
                                type="text"
                                name="billing_address"
                                className="mt-1 block w-full"
                                value={data.billing_address}
                                onChange={(e) =>
                                    setData("billing_address", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.billing_address}
                                className="mt-2"
                            />
                        </div>
                        <div>
                            <InputLabel htmlFor="tax_number" value="Adószám" />
                            <TextInput
                                id="tax_number"
                                type="text"
                                name="tax_number"
                                className="mt-1 block w-full"
                                placeholder="XXXXXXXX-X-XX"
                                value={data.tax_number}
                                onChange={(e) =>
                                    setData("tax_number", e.target.value)
                                }
                            />
                            <InputError
                                message={errors.tax_number}
                                className="mt-2"
                            />
                        </div>
                    </div>

                    {/* Admin jogosultság */}
                    <div className="col-span-2 my-4 flex items-center justify-end">
                        <InputLabel
                            htmlFor="is_admin"
                            value="Admin jogosultság"
                        />
                        <Checkbox
                            id="is_admin"
                            name="is_admin"
                            checked={data.is_admin}
                            onChange={(e) =>
                                setData("is_admin", e.target.checked)
                            }
                            className="ml-2"
                        />
                        <InputError
                            message={errors.is_admin}
                            className="mt-2"
                        />
                    </div>

                    <div className="flex items-center justify-end mt-6">
                        <PrimaryButton
                            className="w-full sm:w-auto"
                            disabled={processing}
                        >
                            Mentés
                        </PrimaryButton>
                    </div>
                </div>
            </form>
        </AuthenticatedLayout>
    );
}
