uldp.edu.vn/app/appointment/page.tsx

"use client";

import { useState, useEffect, FormEvent } from "react";
import { AppointmentData } from "./types";
import Breadcrumb from "../components/Breadcrumb";


export default function AppointmentPage() {
  const [appointmentData, setAppointmentData] = useState<AppointmentData | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    address: "",
    appointmentDate: "",
    message: "",
    visaTypes: [] as string[],
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<{
    type: "success" | "error" | null;
    message: string;
  }>({ type: null, message: "" });

  // Calendar state
  const [currentDate, setCurrentDate] = useState(new Date());

  const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";

  // Calendar helper functions
  const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];

  const getDaysInMonth = (year: number, month: number) => {
    return new Date(year, month + 1, 0).getDate();
  };

  const getFirstDayOfMonth = (year: number, month: number) => {
    const day = new Date(year, month, 1).getDay();
    // Convert Sunday (0) to 7 for Monday-first calendar
    return day === 0 ? 7 : day;
  };

  const generateCalendarDays = () => {
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();
    const daysInMonth = getDaysInMonth(year, month);
    const firstDay = getFirstDayOfMonth(year, month);
    const today = new Date();

    const days: React.ReactNode[] = [];

    // Empty cells for days before the first day of the month
    for (let i = 1; i < firstDay; i++) {
      days.push(<div key={`empty-${i}`} className="date empty"></div>);
    }

    // Days of the month
    for (let day = 1; day <= daysInMonth; day++) {
      const isToday =
        day === today.getDate() &&
        month === today.getMonth() &&
        year === today.getFullYear();

      days.push(
        <div
          key={day}
          className={`date ${isToday ? "today active" : ""}`}
          onClick={() => handleDateClick(year, month, day)}
          style={{ cursor: "pointer" }}
        >
          {day}
        </div>
      );
    }

    return days;
  };

  const handleDateClick = (year: number, month: number, day: number) => {
    const selectedDate = new Date(year, month, day);
    const formattedDate = selectedDate.toISOString().split("T")[0];
    setFormData((prev) => ({ ...prev, appointmentDate: formattedDate }));
  };

  const handlePrevMonth = () => {
    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
  };

  const handleNextMonth = () => {
    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
  };

  // Fetch appointment data from CMS
  useEffect(() => {
    const fetchAppointmentData = async () => {
      try {
        const response = await fetch(`${apiUrl}/api/appointment`);
        const result = await response.json();

        if (result.success && result.data) {
          setAppointmentData(result.data);
        }
      } catch (error) {
        console.error("Error fetching appointment data:", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchAppointmentData();
  }, [apiUrl]);

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleCheckboxChange = (visaType: string, checked: boolean) => {
    setFormData((prev) => ({
      ...prev,
      visaTypes: checked
        ? [...prev.visaTypes, visaType]
        : prev.visaTypes.filter((v) => v !== visaType),
    }));
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus({ type: null, message: "" });

    try {
      const response = await fetch(`${apiUrl}/api/appointment/submit`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      const data = await response.json();

      if (response.ok && data.success) {
        setSubmitStatus({
          type: "success",
          message: data.message || "Thank you! Your appointment has been submitted.",
        });
        // Reset form
        setFormData({
          name: "",
          email: "",
          phone: "",
          address: "",
          appointmentDate: "",
          message: "",
          visaTypes: [],
        });
      } else {
        setSubmitStatus({
          type: "error",
          message: data.error || "Something went wrong. Please try again.",
        });
      }
    } catch (error) {
      console.error("Submit error:", error);
      setSubmitStatus({
        type: "error",
        message: "Network error. Please check your connection and try again.",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  // Get data with fallbacks
  const hero = appointmentData?.hero || {
    title: "Make Appointment",
    backgroundImage: "/assets/img/inner-page/breadcrumb.jpg",
    subtitle: "About Our Consultancy",
    heading: "Want to meet us for your need?",
    description: "24/7 customer support is always ready to answer all your questions",
  };

  const visaOptions = appointmentData?.visaOptions || [
    "Canada Immigration",
    "Tourist Visa",
    "Medical Visa",
    "Coaching",
    "Student Visa",
    "Spouse Visa",
    "Job Opportunity",
    "Exam",
  ];

  const formSettings = appointmentData?.form || {
    heading: "Request Appointment",
    submitButton: {
      text: "Request Appointment",
      icon: "fa-solid fa-arrow-right",
      buttonClass: "theme-btn",
    },
  };

  // Get background image URL
  const backgroundImage = hero.backgroundImage?.startsWith("http")
    ? hero.backgroundImage
    : hero.backgroundImage?.startsWith("/")
      ? hero.backgroundImage
      : `/assets/img/inner-page/breadcrumb.jpg`;

  if (isLoading) {
    return (
      <div className="loading-wrapper" style={{ minHeight: "50vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div className="spinner-border text-primary" role="status">
          <span className="visually-hidden">Loading...</span>
        </div>
      </div>
    );
  }

  return (
    <>
      {/* Breadcrumb-Wrapper Section Start */}
      <Breadcrumb title={hero.title} current={hero.title} />

      {/* Appointment Section Start */}
      <section className="appointment-section section-padding fix">
        <div className="container">
          <div className="appointment-wrapper">
            <div className="row g-4">
              <div className="col-lg-6">
                <div className="appointment-content">
                  <div className="section-title mb-0">
                    {hero.subtitle && (
                      <span className="sub-title-2">{hero.subtitle}</span>
                    )}
                    {hero.heading && (
                      <h2 className="split-text-right split-text-in-right">
                        {hero.heading}
                      </h2>
                    )}
                  </div>
                  <h5>Have any questions?</h5>
                  {hero.description && <p>{hero.description}</p>}
                </div>
              </div>
              <div className="col-lg-6">
                <div className="calendar">
                  <div className="calendar-header">
                    <h2 id="month-year">{months[currentDate.getMonth()]} {currentDate.getFullYear()}</h2>
                    <div>
                      <button type="button" onClick={handlePrevMonth}>&lt;</button>
                      <button type="button" onClick={handleNextMonth}>&gt;</button>
                    </div>
                  </div>
                  <div className="days">
                    <div>Mon</div>
                    <div>Tue</div>
                    <div>Wed</div>
                    <div>Thu</div>
                    <div>Fri</div>
                    <div>Sat</div>
                    <div>Sun</div>
                  </div>
                  <div className="dates" id="dates">
                    {generateCalendarDays()}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section Start */}
      <div className="contact-section section-padding fix pt-0">
        <div className="container">
          <div className="contact-from-wrapper">
            {/* Status Message */}
            {submitStatus.type && (
              <div
                className={`alert ${submitStatus.type === "success"
                  ? "alert-success"
                  : "alert-danger"
                  } text-center mb-4`}
              >
                {submitStatus.message}
              </div>
            )}

            <form onSubmit={handleSubmit} className="contact-form-items">
              <div className="row g-4">
                <div className="col-xl-12">
                  <div className="row g-4">
                    <div className="col-lg-4">
                      <div className="form-clt">
                        <span>Your Name *</span>
                        <input
                          type="text"
                          name="name"
                          value={formData.name}
                          onChange={handleChange}
                          placeholder="Your name"
                          required
                        />
                      </div>
                    </div>
                    <div className="col-lg-4">
                      <div className="form-clt">
                        <span>Your Email *</span>
                        <input
                          type="email"
                          name="email"
                          value={formData.email}
                          onChange={handleChange}
                          placeholder="Your email"
                          required
                        />
                      </div>
                    </div>
                    <div className="col-lg-4">
                      <div className="form-clt">
                        <span>Your Phone</span>
                        <input
                          type="tel"
                          name="phone"
                          value={formData.phone}
                          onChange={handleChange}
                          placeholder="Phone Number"
                        />
                      </div>
                    </div>
                    <div className="col-lg-6">
                      <div className="form-clt">
                        <span>Your Address</span>
                        <input
                          type="text"
                          name="address"
                          value={formData.address}
                          onChange={handleChange}
                          placeholder="Your address"
                        />
                      </div>
                    </div>
                    <div className="col-lg-6">
                      <div className="form-clt">
                        <span>Appointment Date</span>
                        <input
                          type="date"
                          name="appointmentDate"
                          value={formData.appointmentDate}
                          onChange={handleChange}
                        />
                      </div>
                    </div>
                    <div className="col-lg-12">
                      <div className="form-clt">
                        <textarea
                          name="message"
                          value={formData.message}
                          onChange={handleChange}
                          placeholder="Type your message"
                        ></textarea>
                      </div>
                    </div>
                  </div>

                  {visaOptions.length > 0 && (
                    <div className="cheak-list-item">
                      <div className="cheak-list">
                        {visaOptions.slice(0, Math.ceil(visaOptions.length / 2)).map((visa, index) => (
                          <div className="form-check" key={index}>
                            <input
                              className="form-check-input"
                              type="checkbox"
                              id={`visa-${index}`}
                              checked={formData.visaTypes.includes(visa)}
                              onChange={(e) =>
                                handleCheckboxChange(visa, e.target.checked)
                              }
                            />
                            <label
                              className="form-check-label"
                              htmlFor={`visa-${index}`}
                            >
                              {visa}
                            </label>
                          </div>
                        ))}
                      </div>
                      <div className="cheak-list mb-0">
                        {visaOptions.slice(Math.ceil(visaOptions.length / 2)).map((visa, index) => (
                          <div className="form-check" key={index + Math.ceil(visaOptions.length / 2)}>
                            <input
                              className="form-check-input"
                              type="checkbox"
                              id={`visa-${index + Math.ceil(visaOptions.length / 2)}`}
                              checked={formData.visaTypes.includes(visa)}
                              onChange={(e) =>
                                handleCheckboxChange(visa, e.target.checked)
                              }
                            />
                            <label
                              className="form-check-label"
                              htmlFor={`visa-${index + Math.ceil(visaOptions.length / 2)}`}
                            >
                              {visa}
                            </label>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  <button
                    type="submit"
                    className={formSettings.submitButton?.buttonClass || "theme-btn"}
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? "SUBMITTING..." : (formSettings.submitButton?.text || "Request Appointment")}
                    <i className={formSettings.submitButton?.icon || "fa-solid fa-arrow-right"}></i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}