
import GuestLayout from "@/Layouts/GuestLayout";
import { Head, useForm } from "@inertiajs/react";
import { WEBSITE_TITLE } from "@/Config/Constant";
import BreadcrumbComponent from "@/Components/BreadcrumbComponent";
import { Button, Label, Textarea, TextInput } from "flowbite-react";
import { toast } from "react-toastify";
import { useState } from "react";

export default function About({user, about }) {
    const [isOpen, setIsOpen] = useState(false);
    const { data, setData, post, processing, errors, reset } = useForm({ name: "", email: "", subject: "", message: "" });

    const handleSubmit = (e) => {
        e.preventDefault();
        post(route("message.store", data), {
            onSuccess: () => {
                reset('name', 'email', 'subject', 'message');
                toast.success("Your message has been successfully submitted!");
            }
        });
    };
    return (
        <GuestLayout user={user} cartOpen={isOpen} setCartOpen={setIsOpen}>
            <Head title={`Contact us - ${WEBSITE_TITLE}`} />

            <section className="bg-gray-50 dark:bg-gray-600 border-b border-gray-200  dark:border-gray-600">
                <div className="pb-2 px-4 mx-auto max-w-screen-lg lg:pb-4">
                    <div className="mx-auto lg:mx-0 mb-10 bg-red-50 dark:bg-gray-700 p-3">
                        <h2 className="text-3xl font-bold tracking-tight text-gray-800 dark:text-gray-200 sm:text-4xl">
                            Contact us</h2>
                        <BreadcrumbComponent links={
                            [
                                { 'title': 'Contact us', 'path': '#' },
                            ]
                        } />
                    </div>
                    <div className="flex flex-wrap sm:flex-nowrap gap-3" >
                        <div className="sm:w-2/5 bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 p-8 rounded-lg shadow-lg max-w-lg mx-auto">
                            <h2 className="text-2xl font-bold mb-4">Contact Us</h2>
                            <div className="mb-4">
                                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100">Phone Numbers</h3>
                                <p>{about.phone1}</p>
                                <p>{about.phone2}</p>
                            </div>
                            <div className="mb-4">
                                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100">Address</h3>
                                <p>{about.address}</p>
                            </div>
                            <div className="mb-4">
                                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100">Email</h3>
                                <p>{about.email}</p>
                            </div>
                        </div>

                        <div className="sm:w-3/5 bg-white gap-3 p-4 rounded-lg shadow dark:bg-gray-800">
                            <h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Send us your message</h2>

                            <p className="text-gray-600 dark:text-gray-200">
                                We'd love to hear from you! Whether you have questions, feedback, or need assistance, please fill out the form below and our team will get back to you as soon as possible.
                            </p>
                            <form onSubmit={handleSubmit}>
                                <div>
                                    <div className="block">
                                        <Label htmlFor="name" value="Name" />
                                    </div>
                                    <TextInput id="name" value={data.name} onChange={(e) => setData('name', e.target.value)} />
                                    {errors.name && <div className="text-red-500">{errors.name}</div>}
                                </div>
                                <div>
                                    <div className="block">
                                        <Label htmlFor="email" value="Email" />
                                    </div>
                                    <TextInput type="email" id="email" value={data.email} onChange={(e) => setData('email', e.target.value)} placeholder="name@company.com" />
                                    {errors.email && <div className="text-red-500">{errors.email}</div>}
                                </div>
                                <div>
                                    <div className="block">
                                        <Label htmlFor="subject" value="Subject" />
                                    </div>
                                    <TextInput id="subject" value={data.subject} onChange={(e) => setData('subject', e.target.value)} />
                                    {errors.subject && <div className="text-red-500">{errors.subject}</div>}
                                </div>
                                <div>
                                    <div className="block">
                                        <Label htmlFor="message" value="Message" />
                                    </div>
                                    <Textarea id="message" value={data.message} onChange={(e) => setData('message', e.target.value)} placeholder="..." rows={4} />
                                    {errors.message && <div className="text-red-500">{errors.message}</div>}
                                </div>

                                <div className="w-full my-2">
                                    <Button color={'red'} type="submit" isProcessing={processing} disabled={processing}>Send</Button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        </GuestLayout>
    );
}
