'use client'

import { Fragment, useState } from 'react'
import { Dialog, DialogPanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { Bars3Icon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { Link, useForm, usePage } from '@inertiajs/react'
import { classNames } from '@/Utils/Index'
import dayjs from 'dayjs'
import { message } from 'antd'

const navigation = [
    { name: 'home', href: 'guest.welcome' },
    { name: 'products', href: 'guest.products' },
    { name: 'aboutUs', href: 'guest.about' },
    { name: 'news', href: 'guest.news' },
    { name: 'contact', href: 'guest.contact' },
]

export default function GuestLayout({ children }) {

    const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

    const { language, locale } = usePage().props

    const languages = [
        { code: 'mn', label: 'Монгол', flag: 'mn.png' },
        { code: 'en', label: 'English', flag: 'en.png' }
    ];

    const { data, setData, post, progress, errors } = useForm({
        name: null,
        email: null,
        phone: null,
        company: null,
        message: null,
    })

    function onContactSend(e) {
        e.preventDefault()
        post(route('guest.contactStore'), {
            preserveScroll: true,
            onSuccess: () => message.success("Амжилттай"),
        })
    }


    return (
        <div className="bg-white">
            <div className="bg-primary">
                <header className="">
                    <div className="px-4 mx-auto sm:px-6 lg:px-8">
                        <div className="flex items-center justify-between h-16 lg:h-20">
                            <div className="flex-shrink-0">
                                <a href="#" title="" className="flex">
                                    <img className="w-auto h-20" src="/assets/images/logo-white.png" alt="" />
                                </a>
                            </div>
                            <div className="flex lg:hidden">
                                <button
                                    type="button"
                                    onClick={() => setMobileMenuOpen(true)}
                                    className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
                                >
                                    <span className="sr-only">Open main menu</span>
                                    <Bars3Icon aria-hidden="true" className="h-6 w-6" />
                                </button>
                            </div>

                            <Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
                                <div className="fixed inset-0 z-10" />
                                <DialogPanel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
                                    <div className="flex items-center justify-between">
                                        <a href="#" className="-m-1.5 p-1.5">
                                            <span className="sr-only">Your Company</span>
                                            <img
                                                alt=""
                                                src="/assets/images/logo.png"
                                                className="h-14 w-auto"
                                            />
                                        </a>
                                        <button
                                            type="button"
                                            onClick={() => setMobileMenuOpen(false)}
                                            className="-m-2.5 rounded-md p-2.5 text-gray-700"
                                        >
                                            <span className="sr-only">Close menu</span>
                                            <XMarkIcon aria-hidden="true" className="h-6 w-6" />
                                        </button>
                                    </div>
                                    <div className="mt-6 flow-root">
                                        <div className="-my-6 divide-y divide-gray-500/10">
                                            <div className="space-y-2 py-6">
                                                {
                                                    navigation.map((nav, index) => (
                                                        <Link
                                                            key={index}
                                                            href={route(nav.href)}
                                                            className={classNames(
                                                                route().current(nav.href) ? 'text-primary' : 'text-gray-900',
                                                                '-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50'
                                                            )}
                                                            onClick={() => setMobileMenuOpen(false)}
                                                        >
                                                            {language[nav.name]}
                                                        </Link>
                                                    ))
                                                }
                                            </div>
                                            <div className="py-6">
                                                <Link
                                                    href={route("guest.welcome")}
                                                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
                                                >
                                                    Log in
                                                </Link>
                                            </div>
                                        </div>
                                    </div>
                                </DialogPanel>
                            </Dialog>

                            <div className="hidden ml-auto lg:flex lg:items-center lg:justify-center lg:space-x-10">
                                {
                                    navigation.map((nav, index) => (
                                        <Link
                                            key={index}
                                            href={route(nav.href)}
                                            className={classNames(
                                                route().current(nav.href) ? 'text-white' : 'text-slate-100',
                                                'text-base font-bold transition-all duration-200 hover:text-white'
                                            )}
                                        >
                                            {language[nav.name]}
                                        </Link>
                                    ))
                                }
                                <div className="w-px h-5 bg-black/20"></div>
                                <Menu as="div" className="relative inline-block text-left">
                                    {/* Button */}
                                    <MenuButton className="flex items-center gap-2 rounded-md text-sm font-medium text-gray-700">
                                        <img
                                            src={`/assets/images/${languages.find((lang) => lang.code === locale).flag}`}
                                            alt={language}
                                            className="w-9 h-9 rounded-full"
                                        />
                                        {languages.find((lang) => lang.code === language)?.name}
                                    </MenuButton>

                                    {/* Dropdown */}
                                    <MenuItems className="absolute right-0 z-10 mt-2 w-24 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                                        {languages.map((lang) => (
                                            <MenuItem key={lang.code} as={Fragment}>
                                                <Link
                                                    as='post'
                                                    method='post'
                                                    href={route('guest.changeLocale', { locale: lang.code })}
                                                    className={classNames(
                                                        locale === lang.code ? 'bg-gray-100' : '',
                                                        'flex items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:cursor-pointer'
                                                    )}
                                                >
                                                    <img
                                                        src={`/assets/images/${lang.flag}`}
                                                        alt={lang.name}
                                                        className="w-9 h-9 rounded-full"
                                                    />
                                                    {locale === lang.code &&
                                                        <CheckIcon className='w-4 h-4 text-green-500' />
                                                    }
                                                </Link>
                                            </MenuItem>
                                        ))}
                                    </MenuItems>
                                </Menu>
                            </div>
                        </div>
                    </div>
                </header>
            </div>
            {children}
            <footer className="py-10 bg-gradient-to-r from-primary to-primary sm:py-16 lg:py-24">
                <div className="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
                    <div className="max-w-2xl mx-auto text-center">
                        <h2 className="text-3xl font-bold leading-tight text-white sm:text-4xl lg:text-5xl">
                            {language.contact}
                        </h2>
                        {/* <p className="max-w-xl mx-auto mt-4 text-base leading-relaxed text-white">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis.</p> */}
                    </div>

                    <div className="max-w-6xl mx-auto mt-12 overflow-hidden bg-white rounded-md shadow-md lg:mt-20">
                        <div className="grid items-stretch grid-cols-1 lg:grid-cols-5">
                            <div className="lg:col-span-3">
                                <div className="p-6 sm:p-10">
                                    <h3 className="text-2xl font-semibold text-black">
                                        {language.sendMessage}
                                    </h3>

                                    <form onSubmit={onContactSend} className="mt-8">
                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-5 gap-y-4">
                                            <div>
                                                <label for="name" className="text-base font-medium text-gray-900">
                                                    {language.name}
                                                </label>
                                                <div className="mt-2.5 relative">
                                                    <input
                                                        type="text"
                                                        name="name"
                                                        id="name"
                                                        placeholder={language.name}
                                                        onChange={e => setData("name", e.target.value)}
                                                        className={classNames(
                                                            errors.name ? "border-red-400 bg-red-50 focus:border-red-500 caret-red-500"
                                                                : " border-gray-200  bg-gray-50 focus:border-primary focus:bg-white caret-primary",
                                                            "block w-full px-4 py-4 text-black placeholder-gray-500 transition-all duration-200 rounded-md border focus:outline-none"
                                                        )}
                                                    />
                                                    {errors.name &&
                                                        <p className='text-red-400'>{errors.name}</p>
                                                    }
                                                </div>
                                            </div>

                                            <div>
                                                <label for="email" className="text-base font-medium text-gray-900">
                                                    {language.email}
                                                </label>
                                                <div className="mt-2.5 relative">
                                                    <input
                                                        type="text"
                                                        name="email"
                                                        id="email"
                                                        placeholder={language.email}
                                                        onChange={e => setData("email", e.target.value)}
                                                        className={classNames(
                                                            errors.email ? "border-red-400 bg-red-50 focus:border-red-500 caret-red-500"
                                                                : " border-gray-200  bg-gray-50 focus:border-primary focus:bg-white caret-primary",
                                                            "block w-full px-4 py-4 text-black placeholder-gray-500 transition-all duration-200 rounded-md border focus:outline-none"
                                                        )}
                                                    />
                                                    {errors.email &&
                                                        <p className='text-red-400'>{errors.email}</p>
                                                    }
                                                </div>
                                            </div>

                                            <div>
                                                <label for="" className="text-base font-medium text-gray-900">
                                                    {language.phone}
                                                </label>
                                                <div className="mt-2.5 relative">
                                                    <input
                                                        type="text"
                                                        name="phone"
                                                        id="phone"
                                                        placeholder={language.phone}
                                                        onChange={e => setData("phone", e.target.value)}
                                                        className={classNames(
                                                            errors.phone ? "border-red-400 bg-red-50 focus:border-red-500 caret-red-500"
                                                                : " border-gray-200  bg-gray-50 focus:border-primary focus:bg-white caret-primary",
                                                            "block w-full px-4 py-4 text-black placeholder-gray-500 transition-all duration-200 rounded-md border focus:outline-none"
                                                        )}
                                                    />
                                                    {errors.phone &&
                                                        <p className='text-red-400'>{errors.phone}</p>
                                                    }
                                                </div>
                                            </div>

                                            <div>
                                                <label for="company" className="text-base font-medium text-gray-900">
                                                    {language.company}
                                                </label>
                                                <div className="mt-2.5 relative">
                                                    <input
                                                        type="text"
                                                        name="company"
                                                        id="company"
                                                        placeholder={language.company}
                                                        onChange={e => setData("company", e.target.value)}
                                                        className={classNames(
                                                            errors.company ? "border-red-400 bg-red-50 focus:border-red-500 caret-red-500"
                                                                : " border-gray-200  bg-gray-50 focus:border-primary focus:bg-white caret-primary",
                                                            "block w-full px-4 py-4 text-black placeholder-gray-500 transition-all duration-200 rounded-md border focus:outline-none"
                                                        )}
                                                    />
                                                    {errors.company &&
                                                        <p className='text-red-400'>{errors.company}</p>
                                                    }
                                                </div>
                                            </div>

                                            <div className="sm:col-span-2">
                                                <label for="message" className="text-base font-medium text-gray-900">
                                                    {language.message}
                                                </label>
                                                <div className="mt-2.5 relative">
                                                    <textarea
                                                        name="message"
                                                        id="message"
                                                        placeholder={language.message}
                                                        onChange={e => setData("message", e.target.value)}
                                                        className={classNames(
                                                            errors.message ? "border-red-400 bg-red-50 focus:border-red-500 caret-red-500"
                                                                : " border-gray-200  bg-gray-50 focus:border-primary focus:bg-white caret-primary",
                                                            "block w-full px-4 py-4 text-black placeholder-gray-500 transition-all duration-200 rounded-md border focus:outline-none"
                                                        )}
                                                        rows="4"
                                                    ></textarea>
                                                    {errors.message &&
                                                        <p className='text-red-400'>{errors.message}</p>
                                                    }
                                                </div>
                                            </div>

                                            <div className="sm:col-span-2">
                                                <button type="submit" className="inline-flex items-center justify-center w-full px-4 py-4 mt-2 text-base font-semibold text-white transition-all duration-200 bg-primary border border-transparent rounded-md focus:outline-none hover:bg-blue-700 focus:bg-blue-700">
                                                    {language.send}
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div className="bg-gray-100 lg:col-span-2">
                                <div className="h-full p-6 sm:p-10">
                                    <div className="flex flex-col justify-between h-full">
                                        <div>
                                            <h4 className="text-2xl font-semibold text-black">
                                                {language.contactInfo}
                                            </h4>

                                            <div className="mt-8 space-y-7">
                                                <a href='https://maps.app.goo.gl/2CyJPD2SnZvGcqyX8' target='_blank' className="flex items-start ">
                                                    <svg className="flex-shrink-0 text-primary w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                                    </svg>
                                                    <span className="block ml-3 text-base text-gray-900 hover:text-primary"> Төв оффис: Монгол улс, Улаанбаатар хот, СБД 7-р хороо, Ногоон нуурын гудамж, PRO One оффис барилга, 1201 тоот</span>
                                                </a>
                                                <a href='https://maps.app.goo.gl/CY2X7sCb37ppmq7w7' target='_blank' className="flex items-start">
                                                    <svg className="flex-shrink-0 text-primary w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                                    </svg>
                                                    <span className="block ml-3 text-base text-gray-900 hover:text-primary"> Лаборатори хаяг: Монгол улс, Улаанбаатар хот, Банягол дүүрэг 29-р хороо, АСБИ байр </span>
                                                </a>
                                                <a href='https://maps.app.goo.gl/5KkJtruQ69ZoMrNz8 ' target='_blank' className="flex items-start">
                                                    <svg className="flex-shrink-0 text-primary w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                                    </svg>
                                                    <span className="block ml-3 text-base text-gray-900 hover:text-primary"> Дэлгүүрийн хаяг: Монгол улс, Улаанбаатар хот, Баянзүрх дүүрэг 4-р хороо, Энхтайваны өргөн чөлөө 37А, Жоби 72 төв, 1 давхар, 1 тоот</span>
                                                </a>

                                                <a href='mailto:info@scales.mn ' className="flex items-start">
                                                    <svg className="flex-shrink-0 text-primary w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                                    </svg>
                                                    <span className="block ml-3 text-base text-gray-900 hover:text-primary"> info@scales.mn  </span>
                                                </a>

                                                <div className="flex items-start">
                                                    <svg className="flex-shrink-0 text-primary w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path
                                                            stroke-linecap="round"
                                                            stroke-linejoin="round"
                                                            stroke-width="1.5"
                                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                                                        />
                                                    </svg>
                                                    <div className="ml-3">
                                                        <span className="block text-base text-gray-900 hover:text-primary">
                                                            Төв оффис: <a href='tel:(+976) 7777-2046'>(+976) 7777-2046</a> {" , "}
                                                            <a href='tel:(+976) 9901-2046'>(+976) 9901-2046</a>
                                                        </span>
                                                        <span className="block mt-1 text-base text-gray-900 hover:text-primary">
                                                            Дэлгүүр: <a href='tel:(+976) 9905-2046'>(+976) 9905-2046</a>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="mt-8 lg:mt-auto">
                                            <hr className="border-gray-200 mt-2" />
                                            <div className="flex items-center space-x-2 mt-4">
                                                <p className="text-lg font-semibold text-black">{language.social}</p>

                                                <ul className="flex items-center justify-end space-x-3">

                                                    <li>
                                                        <a
                                                            href="https://www.facebook.com/measuring.instrument"
                                                            title=""
                                                            target='_blank'
                                                            className="
                                                    flex
                                                    items-center
                                                    justify-center
                                                    text-gray-800
                                                    transition-all
                                                    duration-200
                                                    bg-transparent
                                                    border border-gray-300
                                                    rounded-full
                                                    w-7
                                                    h-7
                                                    focus:bg-primary
                                                    hover:text-white
                                                    focus:text-white
                                                    hover:bg-primary hover:border-primary
                                                    focus:border-primary
                                                            "
                                                        >
                                                            <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                                                <path d="M13.397 20.997v-8.196h2.765l.411-3.209h-3.176V7.548c0-.926.258-1.56 1.587-1.56h1.684V3.127A22.336 22.336 0 0 0 14.201 3c-2.444 0-4.122 1.492-4.122 4.231v2.355H7.332v3.209h2.753v8.202h3.312z"></path>
                                                            </svg>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="mt-8 md:order-1">
                    <p className="text-center text-xs leading-5 text-white">
                        &copy; {dayjs().format("YYYY")} {language.allRightReserved}.
                    </p>
                </div>
            </footer>

            {/* <footer className="bg-white">
                <div className="mx-auto max-w-7xl px-6 py-4 md:flex md:items-center md:justify-between lg:px-8">
                    <div className="flex justify-center space-x-6 md:order-2">
                        {social.map((item) => (
                            <a key={item.name} href={item.href} className="text-gray-400 hover:text-gray-500">
                                <span className="sr-only">{item.name}</span>
                                <item.icon className="h-6 w-6" aria-hidden="true" />
                            </a>
                        ))}
                    </div>
                    <div className="mt-8 md:order-1 md:mt-0">
                        <p className="text-center text-xs leading-5 text-gray-500">
                            &copy; 2020 Your Company, Inc. All rights reserved.
                        </p>
                    </div>
                </div>
            </footer> */}
        </div>
    );
}