1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / smartweb / priyoholidays.com / src / components / pages / make-your-trip /
Filename : MakeYourTripForm.jsx
back
'use client'

import PrimaryButton from '@/components/buttons/PrimaryButton'
import Input from '@/components/common/Input'
import Select from '@/components/common/Select'
import Textarea from '@/components/common/Textarea'
import React, { useEffect, useRef, useState } from 'react'
import { FaPlay } from 'react-icons/fa'
import cn from '@/helpers/cn'
import TripForm from './TripForm'
import PlayModal, { PlayModalService } from '@/components/common/PlayModal'
import { useSignals } from '@preact/signals-react/runtime'

export default function MakeYourTripForm() {
    useSignals();
    const formOneRef = useRef(null)
    const formTwoRef = useRef(null)
    const formThreeRef = useRef(null)
    const [activeForm, setActiveForm] = useState(0)
    const [maxFilledForm, setMaxFilledForm] = useState(null)
    const [tripForms, setTripForms] = useState([])

    // const { open, close, toggle } = PlayModalService()
    const playModalService = PlayModalService()

    function tryActiveForm(form) {
        const forms = [formOneRef, formTwoRef, formThreeRef]
        Object.keys(forms).forEach(key => {
            if (forms[key].current) forms[key].current.style = 'display: none !important;'
        })
        if (forms[form].current) forms[form].current.style = 'display: flex !important;'
    }

    const handleFirstForm = e => {
        e.preventDefault()
        setActiveForm(1)
        setMaxFilledForm(1)
    }
    const handleSecondForm = e => {
        e.preventDefault()
        setActiveForm(2)
        setMaxFilledForm(2)
    }
    const handleThirdForm = e => {
        e.preventDefault()
        setActiveForm(3)
        setMaxFilledForm(3)
    }

    useEffect(() => {
        if (typeof activeForm !== 'undefined') tryActiveForm(activeForm)
        console.log(activeForm, maxFilledForm)
    }, [activeForm, maxFilledForm])

    return (
        <section
            className='py-4 md:py-24 overflow-hidden'
            style={{
                backgroundImage: 'url(/assets/images/contact-bg.jpg)',
                backgroundPosition: 'center center',
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
            }}>
            <div className='hx-container grid grid-cols-1 lg:grid-cols-6 gap-6'>
                <div className='lg:col-span-4 bg-white px-4 md:px-8 py-2 md:py-3 rounded-2xl relative z-10'>
                    {/* <h3 className='text-center my-1 mb-2 text-2xl'>Make Your Own Trip</h3> */}
                    <div class='text-sm font-medium text-center text-gray-500 border-b border-gray-200 mb-2 md:mb-4'>
                        <ul class='flex overflow-x-auto -mb-px cursor-default'>
                            <li class='me-2 min-w-[100px]'>
                                <button
                                    onClick={() => activeForm > 0 && setActiveForm(0)}
                                    class={cn('inline-block p-4 border-b-2 rounded-t-lg', {
                                        'text-primary border-primary': activeForm === 0,
                                        'border-transparent cursor-pointer': activeForm > 0,
                                    })}
                                    aria-current='page'>
                                    About You
                                </button>
                            </li>
                            <li class='me-2 min-w-[100px]'>
                                <button
                                    onClick={() => (maxFilledForm > 0 || activeForm > 1) && setActiveForm(1)}
                                    class={cn('inline-block p-4 border-b-2 rounded-t-lg', {
                                        'text-primary border-primary': activeForm === 1,
                                        'border-transparent cursor-pointer': (maxFilledForm > 0 || activeForm > 1) && activeForm !== 1,
                                        'border-transparent cursor-not-allowed': activeForm < 1 && typeof maxFilledForm !== 'number',
                                    })}>
                                    Your Trip
                                </button>
                            </li>
                            <li class='me-2 min-w-[100px]'>
                                <button
                                    onClick={() => (maxFilledForm > 1 || activeForm > 2) && setActiveForm(2)}
                                    class={cn('inline-block p-4 border-b-2 rounded-t-lg', {
                                        'text-primary border-primary': activeForm === 2,
                                        'border-transparent cursor-pointer': (maxFilledForm > 1 || activeForm > 2) && activeForm !== 2 /* activeForm > 2 */,
                                        'border-transparent cursor-not-allowed': activeForm < 2 && typeof maxFilledForm !== 'number' /* activeForm < 2 */,
                                    })}>
                                    Air Ticket
                                </button>
                            </li>
                            <li class='me-2 min-w-[100px]'>
                                <button
                                    onClick={() => (maxFilledForm > 2 || activeForm > 3) && setActiveForm(3)}
                                    class={cn('inline-block p-4 border-b-2 rounded-t-lg', {
                                        'text-primary border-primary': (maxFilledForm > 2 || activeForm > 3) && activeForm !== 3,
                                        'border-transparent cursor-not-allowed': activeForm < 3 && typeof maxFilledForm !== 'number',
                                    })}>
                                    Trip Cost
                                </button>
                            </li>
                        </ul>
                    </div>

                    {/* Form 1 */}
                    <div className='overflow-x-hidden'>
                        <form ref={formOneRef} onSubmit={handleFirstForm} className='pt-2 md:pt-4 w-full gap-2 md:gap-4 flex flex-col justify-center items-center'>
                            <h3 className='text-xl w-full hidden md:block'>About You</h3>
                            <div className='flex flex-col sm:flex-row justify-center items-center gap-2 md:gap-4 w-full'>
                                <Input title='Your Name' name='fname' type='name' placeholder='Full Name' required />
                                <Input title='Your Phone' name='phone' type='number' placeholder='Your Phone' required />
                            </div>
                            <Input title='Your Email' name='email' type='email' placeholder='Your Email' required />
                            <Textarea title='Your Address' name='address' rows={4} placeholder='Your Address' required />
                            <div className='-mt-1 md:mt-4 w-full flex justify-center items-center'>
                                <PrimaryButton type='submit'>Next</PrimaryButton>
                            </div>
                        </form>
                        {/* ----------------- */}
                        {/* Form 2 */}
                        <form ref={formTwoRef} onSubmit={handleSecondForm} className='pt-2 md:pt-4 w-full hidden gap-2 md:gap-4 flex-col justify-center items-center'>
                            <h3 className='text-xl w-full hidden md:block'>Your Trip</h3>
                            <TripForm />
                            {tripForms.map((form, index) => (
                                <TripForm key={index} removable />
                            ))}
                            <div className='w-full flex sm:justify-start justify-center items-center'>
                                <PrimaryButton
                                    type='button'
                                    noIcon={true}
                                    className='text-sm px-8 py-3 rounded-lg before:rounded-lg'
                                    onClick={() =>
                                        setTripForms(old => {
                                            return [...old, {}]
                                        })
                                    }>
                                    Add Country
                                </PrimaryButton>
                            </div>
                            <div className='-mt-1 md:mt-4 w-full flex justify-center items-center'>
                                <PrimaryButton type='submit'>Next</PrimaryButton>
                            </div>
                        </form>
                        {/* ----------------- */}
                        {/* Form 3 */}
                        <form ref={formThreeRef} onSubmit={handleThirdForm} className='pt-2 md:pt-4 w-full hidden gap-2 md:gap-4 flex-col justify-center items-center'>
                            <h3 className='text-xl w-full hidden md:block'>Air Ticket</h3>
                            <div className='grid grid-cols-1 md:grid-cols-3 w-full items-end justify-center gap-3'>
                                <Select
                                    title='Air Ticket'
                                    name='air_ticket'
                                    placeholder='Select Air Ticket'
                                    required
                                    options={[
                                        { value: 'one_way', label: 'One Way' },
                                        { value: 'return', label: 'Return' },
                                    ]}
                                />
                                <div className='col-span-2'>
                                    <PrimaryButton type='button' noIcon={true} className='text-sm px-8 py-3 rounded-lg before:rounded-lg'>
                                        Add Price
                                    </PrimaryButton>
                                </div>
                            </div>
                            <div className='grid grid-cols-1 md:grid-cols-3 justify-center items-center gap-2 md:gap-4 w-full'>
                                <Input title='Adult Person' name='adult' type='text' placeholder='Adult Person' required />
                                <Input title='Child Person' name='child' type='text' placeholder='Child Person' required />
                                <Input title='Infant Person' name='infant' type='text' placeholder='Infant Person' required />
                            </div>
                            <div className='-mt-1 md:mt-4 w-full flex justify-center items-center'>
                                <PrimaryButton type='submit'>Next</PrimaryButton>
                            </div>
                        </form>
                        {/* ----------------- */}
                    </div>
                </div>
                <div className='lg:col-span-2 h-full flex justify-center items-center'>
                    <button
                        onClick={() => playModalService.toggle()}
                        className='w-32 h-32 flex justify-center items-center bg-white bg-opacity-30 rounded-full relative before:absolute before:animate-ping-slow before:rounded-full before:w-full before:h-full before:border'>
                        <FaPlay size={22} className='text-white' />
                    </button>
                </div>
            </div>
            <PlayModal youtubeId="kKQDFZ5Ha-U" />
        </section>
    )
}