stay_commerce-frontend 0.1.0

data/app/javascript/react/components/AddNewProperty/Room.jsx

@@ -0,0 +1,1132 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";
+import { Formik, useFormikContext } from "formik";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+
+import Input from "../../shared/Input/Input";
+import Select from "../../shared/Select/Select";
+import FormItem from "../../shared/FormItem/FormItem";
+import {
+  getallupdateProperties,
+  getRoomAmenitiesProperty,
+  getRoomFeaturesProperty,
+  getBedType,
+  getRoomType,
+  uploadImageProperties,
+  deleteImage,
+} from "../../redux/slices/PropertySlice/PropertySlice";
+import successHandler from "../../utils/helpers/SuccessHandler";
+
+import Checkbox from "../../shared/Checkbox/Checkbox";
+import CommonLayout from "./CommonLayout";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import CustomDatePicker from "../../shared/DateField/CustomDatePicker";
+import { useDropzone } from "react-dropzone";
+import NcImage from "../../shared/NcImage/NcImage";
+import moment from "moment";
+import "../../styles/room.scss";
+
+const Rooms = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { globalId } = useSelector((state) => state.property);
+  const { slug } = useParams();
+  const id = slug;
+  const [property, setProperty] = useState(null);
+
+  const initialRoomValues = {
+    id: "",
+    name: "",
+    price_per_month: "",
+    status: "",
+    booking_start: "",
+    booking_end: "",
+    description: "",
+    bed_type_id: "",
+    size: "",
+    room_type_id: "",
+    amenities: [],
+    features: [],
+    room_images: [],
+    max_guests: "",
+  };
+
+  const [initialValues, setInitialValues] = useState({
+    rooms_attributes: [initialRoomValues],
+  });
+
+  const [amenities, setAmenities] = useState([]);
+  const [features, setFeatures] = useState([]);
+  const [bedTypes, setBedTypes] = useState([]);
+  const [reorderImages, setReorderImages] = useState([]);
+  const [totalRooms, setTotalRooms] = useState(null);
+  const RouteID = id;
+  const [roomTypes, setRoomTypes] = useState([]);
+  const [count, setCount] = useState(1);
+  const [roomImagePreviews, setRoomImagePreviews] = useState({});
+  const [roomImagesToDelete, setRoomImagesToDelete] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    if (initialValues?.rooms_attributes?.length > 0) {
+      setCount(initialValues?.rooms_attributes?.length);
+    }
+  }, [initialValues]);
+
+  useEffect(() => {
+    if (id) {
+      const fetchPropertyData = async () => {
+        const response = await dispatch(
+          getallupdateProperties({ propertyId: id })
+        ).unwrap();
+        if (response.payload?.success) {
+          setProperty(response);
+        }
+        if (response?.rooms) {
+          const mappedRooms = response?.rooms.map((room) => {
+            const sortedPlaceImages = [...room?.room_images].sort(
+              (a, b) => a.position - b.position
+            );
+            return {
+              id: room.id,
+              name: room.name,
+              price_per_month:
+                room.price_per_month === "0.0"
+                  ? ""
+                  : room.price_per_month?.toString() || "",
+              status: room.status,
+              booking_start: room.booking_start
+                ? room.booking_start.split("T")[0]
+                : "",
+              booking_end: room.booking_end
+                ? room.booking_end.split("T")[0]
+                : "",
+              description: room.description || "",
+              bed_type_id: room.bed_type?.id?.toString() || "",
+              size: room.size?.toString() || "",
+              room_type_id: room.room_type?.id?.toString() || "",
+              amenities: room.amenities || [],
+              features: room.features || [],
+              room_images: [],
+              existing_room_images: sortedPlaceImages || [],
+              max_guests: room.max_guests?.toString() || "",
+            };
+          });
+          const uniqueRooms = Array.from(
+            new Map(mappedRooms.map((room) => [room?.id, room])).values()
+          );
+          setInitialValues({
+            rooms_attributes:
+              uniqueRooms.length > 0
+                ? uniqueRooms
+                : initialValues.rooms_attributes?.map((item) => ({
+                    ...item,
+                  })),
+          });
+        }
+      };
+      fetchPropertyData();
+    }
+  }, [dispatch, globalId, id]);
+
+  const handleAmenitiesChange = (
+    amenityId,
+    roomIndex,
+    values,
+    setFieldValue
+  ) => {
+    const updatedAmenities = values.rooms_attributes.map((room, index) => {
+      if (index === roomIndex) {
+        const currentAmenities = room.amenities || [];
+
+        const newAmenities = currentAmenities.some(
+          (item) => item.amenity_id === amenityId || item.id === amenityId
+        )
+          ? currentAmenities.filter(
+              (item) => item.amenity_id !== amenityId && item.id !== amenityId
+            )
+          : [...currentAmenities, { amenity_id: amenityId }];
+
+        return { ...room, amenities: newAmenities };
+      }
+      return room;
+    });
+
+    setFieldValue("rooms_attributes", updatedAmenities);
+  };
+
+  const handleFeaturesChange = (
+    featureId,
+    roomIndex,
+    values,
+    setFieldValue
+  ) => {
+    const updatedFeatures = values.rooms_attributes.map((room, index) => {
+      if (index === roomIndex) {
+        const currentFeatures = room.features || [];
+        const newFeatures = currentFeatures.some(
+          (item) => item.feature_id === featureId || item.id === featureId
+        )
+          ? currentFeatures.filter(
+              (item) => item.feature_id !== featureId && item.id !== featureId
+            )
+          : [...currentFeatures, { feature_id: featureId }];
+
+        return { ...room, features: newFeatures };
+      }
+      return room;
+    });
+
+    setFieldValue("rooms_attributes", updatedFeatures);
+  };
+
+  const handleSubmit = async (values) => {
+    const formData = new FormData();
+
+    if (id) {
+      formData.append(`property[id]`, id);
+    }
+
+    const hasImagesToDelete = Object.values(roomImagesToDelete).some(
+      (arr) => arr.length > 0
+    );
+
+    if (hasImagesToDelete) {
+      try {
+        const allImageIds = Object.values(roomImagesToDelete)
+          .flatMap((ids) => ids)
+          .filter((id) => id !== undefined);
+
+        if (allImageIds.length > 0) {
+          await dispatch(deleteImage({ id: allImageIds })).unwrap();
+        }
+      } catch (error) {
+        console.error("Error removing room images:", error);
+      }
+    }
+    for (const [index, room] of values.rooms_attributes.entries()) {
+      const modifiedAmenities = room.amenities?.map((item) => ({
+        amenity_id: item.id || item.amenity_id,
+      }));
+
+      const modifiedFeatures = room.features?.map((item) => ({
+        feature_id: item.id || item.feature_id,
+      }));
+
+      if (room.id) {
+        formData.append(
+          `property[rooms_attributes][${index}][id]`,
+          room.id.toString()
+        );
+      }
+      formData.append(`property[rooms_attributes][${index}][name]`, room.name);
+      formData.append(
+        `property[rooms_attributes][${index}][price_per_month]`,
+        room.price_per_month ? room.price_per_month.toString() : ""
+      );
+      formData.append(
+        `property[rooms_attributes][${index}][status]`,
+        room.status
+      );
+      formData.append(
+        `property[rooms_attributes][${index}][booking_start]`,
+        moment(room.booking_start).format("YYYY-MM-DD") || ""
+      );
+      formData.append(
+        `property[rooms_attributes][${index}][booking_end]`,
+        moment(room.booking_end).format("YYYY-MM-DD") || ""
+      );
+      formData.append(
+        `property[rooms_attributes][${index}][description]`,
+        room.description
+      );
+      formData.append(
+        `property[rooms_attributes][${index}][bed_type_id]`,
+        room.bed_type_id.toString()
+      );
+      formData.append(
+        `property[rooms_attributes][${index}][size]`,
+        room.size.toString()
+      );
+      formData.append(
+        `property[rooms_attributes][${index}][room_type_id]`,
+        room.room_type_id.toString()
+      );
+      formData.append(
+        `property[rooms_attributes][${index}][max_guests]`,
+        room.max_guests.toString()
+      );
+
+      if (modifiedAmenities) {
+        modifiedAmenities.forEach((amenity, amenityIndex) => {
+          formData.append(
+            `property[rooms_attributes][${index}][room_amenities_attributes][${amenityIndex}][amenity_id]`,
+            amenity.amenity_id
+          );
+        });
+      }
+
+      if (modifiedFeatures) {
+        modifiedFeatures.forEach((feature, featureIndex) => {
+          formData.append(
+            `property[rooms_attributes][${index}][room_features_attributes][${featureIndex}][feature_id]`,
+            feature.feature_id
+          );
+        });
+      }
+
+      const newRoomImages = room.room_images?.filter(
+        (image) => image instanceof File
+      );
+      const existingImages = room.existing_room_images || [];
+
+      if (newRoomImages && newRoomImages.length > 0) {
+        newRoomImages.forEach((image) => {
+          if (image instanceof File) {
+            formData.append(
+              `property[rooms_attributes][${index}][room_images][]`,
+              image
+            );
+          }
+        });
+      }
+
+      if (existingImages.length > 0) {
+        existingImages.forEach((image) => {
+          if (image && image.id) {
+            formData.append(
+              `property[rooms_attributes][${index}][existing_room_image_ids][]`,
+              image.id
+            );
+          }
+        });
+      }
+    }
+    try {
+      const response = await dispatch(uploadImageProperties(formData)).unwrap();
+      if (response) {
+        successHandler(response?.message || "Updated successfully");
+        navigate(`/listing-stay-detail/${slug}`);
+      }
+    } catch (error) {
+      console.error("Error updating property: ", error);
+    }
+  };
+
+  function arraysEqual(arr1, arr2) {
+    if (arr1.length !== arr2.length) return false;
+    for (let i = 0; i < arr1.length; i++) {
+      if (JSON.stringify(arr1[i]) !== JSON.stringify(arr2[i])) return false;
+    }
+    return true;
+  }
+
+  const handleRoomImagesChange = (e, index, setFieldValue, values) => {
+    const files = e.target.files;
+    const newFiles = files ? Array.from(files) : [];
+    if (files) {
+      const newPreviews = newFiles.map((file) => URL.createObjectURL(file));
+
+      setRoomImagePreviews((prevPreviews) => ({
+        ...prevPreviews,
+        [index]: [...(prevPreviews[index] || []), ...newPreviews],
+      }));
+
+      const existingImages =
+        values.rooms_attributes?.[index]?.room_images || [];
+      const combinedImages = [...existingImages, ...newFiles];
+      setFieldValue(`rooms_attributes[${index}].room_images`, combinedImages);
+    }
+  };
+
+  const handleRemoveRoomImage = async (
+    previewIndex,
+    index,
+    values,
+    setFieldValue
+  ) => {
+    const existingImages =
+      values?.rooms_attributes[index]?.existing_room_images || [];
+    const isExistingImage = previewIndex < existingImages.length;
+
+    if (isExistingImage) {
+      const imageIdToRemove = existingImages[previewIndex]?.id;
+      setRoomImagesToDelete((prev) => {
+        const updatedMap = { ...prev };
+        if (!updatedMap[index]) {
+          updatedMap[index] = [];
+        }
+        updatedMap[index] = [...updatedMap[index], imageIdToRemove];
+        return updatedMap;
+      });
+      const updatedExistingImages = existingImages.filter(
+        (_, idx) => idx !== previewIndex
+      );
+      setFieldValue(
+        `rooms_attributes[${index}].existing_room_images`,
+        updatedExistingImages
+      );
+    } else {
+      const newPreviews = roomImagePreviews[index] || [];
+      const updatedPreviews = newPreviews.filter(
+        (_, idx) => idx !== previewIndex - existingImages.length
+      );
+
+      setRoomImagePreviews((prevPreviews) => {
+        const updatedPreviewsMap = { ...prevPreviews };
+        updatedPreviewsMap[index] = updatedPreviews;
+        return updatedPreviewsMap;
+      });
+      const newImages = values.rooms_attributes[index]?.room_images || [];
+      const updatedNewImages = newImages.filter(
+        (_, idx) => idx !== previewIndex - existingImages.length
+      );
+      setFieldValue(`rooms_attributes[${index}].room_images`, updatedNewImages);
+    }
+  };
+
+  useEffect(() => {
+    dispatch(getRoomFeaturesProperty())
+      .unwrap()
+      .then((response) => setFeatures(response.data))
+      .catch((error) => console.error("Error fetching features:", error));
+
+    dispatch(getRoomAmenitiesProperty())
+      .unwrap()
+      .then((response) => setAmenities(response.data))
+      .catch((error) => console.error("Error fetching features:", error));
+  }, [dispatch]);
+
+  useEffect(() => {
+    const fetchBedTypes = async () => {
+      try {
+        const response = await dispatch(getBedType()).unwrap();
+        if (response.success) {
+          setBedTypes(response.data);
+        } else {
+          console.error("Failed to fetch bed types:", response.message);
+        }
+      } catch (error) {
+        console.error("Error fetching bed types:", error);
+      }
+    };
+
+    const fetchRoomTypes = async () => {
+      try {
+        const response = await dispatch(getRoomType()).unwrap();
+        if (response.success) {
+          setRoomTypes(response.data);
+        } else {
+          console.error("Failed to fetch room types:", response.message);
+        }
+      } catch (error) {
+        console.error("Error fetching room types:", error);
+      }
+    };
+    fetchBedTypes();
+    fetchRoomTypes();
+  }, [dispatch]);
+
+  const useRoomsImagesDropzone = (index, values, setFieldValue) => {
+    return useDropzone({
+      onDrop: (acceptedFiles) => {
+        const files = acceptedFiles.map((file) => URL.createObjectURL(file));
+
+        setRoomImagePreviews((prevPreviews) => ({
+          ...prevPreviews,
+          [index]: [...(prevPreviews[index] || []), ...files],
+        }));
+
+        const existingImages =
+          values.rooms_attributes?.[index]?.room_images || [];
+        const combinedImages = [...existingImages, ...acceptedFiles];
+        setFieldValue(`rooms_attributes[${index}].room_images`, combinedImages);
+      },
+    });
+  };
+
+  const RoomImagesUploader = ({ index }) => {
+    const { values, setFieldValue } = useFormikContext();
+    const handleImageUpload = (files) => {
+      if (!files || files.length === 0) return;
+      const newFiles = Array.from(files);
+      const newPreviews = newFiles.map((file) => ({
+        previewUrl: URL.createObjectURL(file),
+        file,
+      }));
+      setRoomImagePreviews((prevPreviews) => ({
+        ...prevPreviews,
+        [index]: [...(prevPreviews[index] || []), ...newPreviews],
+      }));
+      const existingImages =
+        values.rooms_attributes?.[index]?.room_images || [];
+      const combinedImages = [...existingImages, ...newFiles];
+      setFieldValue(`rooms_attributes[${index}].room_images`, combinedImages);
+    };
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+      accept: {
+        "image/*": [".jpeg", ".jpg", ".png", ".gif"],
+      },
+      onDrop: handleImageUpload,
+    });
+
+    return (
+      <div
+        {...getRootProps()}
+        className={`upload-container ${isDragActive ? "drag-active" : ""}`}
+      >
+        <input
+          {...getInputProps()}
+          id={`room-image-upload-${index}`}
+          name={`room-image-upload-${index}`}
+          type="file"
+          className="sr-only"
+          multiple
+          // No need for onChange here as the dropzone will handle all inputs
+        />
+        <div className="upload-content">
+          <svg
+            className="upload-icon"
+            stroke="currentColor"
+            fill="none"
+            viewBox="0 0 48 48"
+            aria-hidden="true"
+          >
+            <path
+              d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <div className="upload-text">
+            <span className="upload-link">Upload multiple files</span>
+            <p className="pl-1">or drag and drop</p>
+          </div>
+          <p className="upload-info">PNG, JPG, GIF up to 10MB</p>
+        </div>
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    setTimeout(() => setIsLoading(false), 1500);
+  }, []);
+
+  return (
+    <CommonLayout currentHref="/property-4" PropertyID={RouteID}>
+      <div className="description-container">
+        <h2 className="rooms-title">Room Details</h2>
+        <span className="rooms-subtitle">
+          Provide detailed information about your property to help guests make
+          informed decisions.
+        </span>
+        <div className="divider" />
+        <Formik
+          initialValues={initialValues}
+          //   validationSchema={roomRuleValidationSchema}
+          onSubmit={handleSubmit}
+          enableReinitialize={true}
+        >
+          {({
+            errors,
+            values,
+            handleChange,
+            handleSubmit,
+            isSubmitting,
+            getFieldProps,
+            setFieldValue,
+          }) => (
+            <form onSubmit={handleSubmit} className="form-container">
+              {values.rooms_attributes.map((room, index) => (
+                <div
+                  key={index}
+                  className={`room-section ${
+                    index > 0 ? "room-section-bordered" : ""
+                  }`}
+                >
+                  <h3 className="room-title">Room {index + 1}</h3>
+                  <FormItem label="Room Name" className="form-item">
+                    <Input
+                      type="text"
+                      placeholder="Enter Room name"
+                      {...getFieldProps(`rooms_attributes[${index}].name`)}
+                      className="common-input"
+                    />
+                    {errors.rooms_attributes &&
+                      Array.isArray(errors.rooms_attributes) &&
+                      typeof errors.rooms_attributes[index] === "object" &&
+                      errors.rooms_attributes[index] !== null &&
+                      errors.rooms_attributes[index].name && (
+                        <div className="error-text">
+                          {errors.rooms_attributes[index].name}
+                        </div>
+                      )}
+                  </FormItem>
+                  <FormItem label="Price per Month" className="form-item">
+                    <div className="relative">
+                      <Input
+                        type="text"
+                        name={`rooms_attributes[${index}].price_per_month`}
+                        placeholder="Please enter price per month"
+                        onChange={handleChange}
+                        value={values.rooms_attributes[index]?.price_per_month}
+                        className="common-input"
+                      />
+                    </div>
+                    {errors.rooms_attributes &&
+                      Array.isArray(errors.rooms_attributes) &&
+                      typeof errors.rooms_attributes[index] === "object" &&
+                      errors.rooms_attributes[index] !== null &&
+                      errors.rooms_attributes[index].price_per_month && (
+                        <div className="error-text">
+                          {errors.rooms_attributes[index].price_per_month}
+                        </div>
+                      )}
+                  </FormItem>
+                  <FormItem label="Status" className="form-item">
+                    <Select
+                      name={`rooms_attributes[${index}].status`}
+                      onChange={handleChange}
+                      value={room.status}
+                      className="common-input"
+                    >
+                      <option value="">Select status</option>
+                      <option value="active">Active</option>
+                      <option value="inactive">Inactive</option>
+                    </Select>
+                    {errors.rooms_attributes &&
+                      Array.isArray(errors.rooms_attributes) &&
+                      typeof errors.rooms_attributes[index] === "object" &&
+                      errors.rooms_attributes[index] !== null &&
+                      errors.rooms_attributes[index].status && (
+                        <div className="error-text">
+                          {errors.rooms_attributes[index].status}
+                        </div>
+                      )}
+                  </FormItem>
+                  <FormItem label="Max Guests" className="form-item">
+                    <div className="relative">
+                      <Input
+                        type="text"
+                        name={`rooms_attributes[${index}].max_guests`}
+                        placeholder="Max-Guests"
+                        onChange={handleChange}
+                        value={values.rooms_attributes[index]?.max_guests}
+                        className="common-input"
+                      />
+                    </div>
+                    {errors.rooms_attributes &&
+                      Array.isArray(errors.rooms_attributes) &&
+                      typeof errors.rooms_attributes[index] === "object" &&
+                      errors.rooms_attributes[index] !== null &&
+                      errors.rooms_attributes[index].max_guests && (
+                        <div className="error-text">
+                          {errors.rooms_attributes[index].max_guests}
+                        </div>
+                      )}
+                  </FormItem>
+                  <div className="date-picker-container">
+                    <FormItem label="Availability Start Date">
+                      <input
+                        type="date"
+                        className="common-input"
+                        value={
+                          room.booking_start
+                            ? room.booking_start.split("T")[0]
+                            : ""
+                        }
+                        onChange={(e) => {
+                          const selectedDate = e.target.value;
+                          setFieldValue(
+                            `rooms_attributes[${index}].booking_start`,
+                            selectedDate
+                          );
+                          setFieldValue(
+                            `rooms_attributes[${index}].booking_end`,
+                            null
+                          );
+                        }}
+                        min={new Date().toISOString().split("T")[0]}
+                      />
+                      {errors.rooms_attributes &&
+                        Array.isArray(errors.rooms_attributes) &&
+                        errors.rooms_attributes[index] &&
+                        typeof errors.rooms_attributes[index] === "object" &&
+                        errors.rooms_attributes[index] !== null &&
+                        errors.rooms_attributes[index].booking_start && (
+                          <div className="error-text">
+                            {typeof errors.rooms_attributes[index]
+                              .booking_start === "string" &&
+                              errors.rooms_attributes[index].booking_start}
+                          </div>
+                        )}
+                    </FormItem>
+
+                    <FormItem
+                      label="Availability End Date"
+                      className="form-item"
+                    >
+                      <input
+                        type="date"
+                        className="common-input"
+                        value={
+                          room.booking_end ? room.booking_end.split("T")[0] : ""
+                        }
+                        onChange={(e) => {
+                          const selectedDate = e.target.value;
+                          setFieldValue(
+                            `rooms_attributes[${index}].booking_end`,
+                            selectedDate
+                          );
+                        }}
+                        min={
+                          room.booking_start
+                            ? new Date(
+                                new Date(room.booking_start).getTime() +
+                                  86400000
+                              )
+                                .toISOString()
+                                .split("T")[0]
+                            : new Date().toISOString().split("T")[0]
+                        }
+                      />
+                      {errors.rooms_attributes &&
+                        Array.isArray(errors.rooms_attributes) &&
+                        errors.rooms_attributes[index] &&
+                        typeof errors.rooms_attributes[index] === "object" &&
+                        errors.rooms_attributes[index] !== null &&
+                        errors.rooms_attributes[index].booking_end && (
+                          <div className="error-text">
+                            {typeof errors.rooms_attributes[index]
+                              .booking_end === "string" &&
+                              errors.rooms_attributes[index].booking_end}
+                          </div>
+                        )}
+                    </FormItem>
+                  </div>
+                  <FormItem label="Description" className="form-item">
+                    <textarea
+                      className="description-textarea"
+                      name={`rooms_attributes[${index}].description`}
+                      placeholder="Enter room description"
+                      onChange={handleChange}
+                      value={room.description}
+                    />
+                    {errors.rooms_attributes &&
+                      Array.isArray(errors.rooms_attributes) &&
+                      typeof errors.rooms_attributes[index] === "object" &&
+                      errors.rooms_attributes[index] !== null &&
+                      errors.rooms_attributes[index].description && (
+                        <div className="error-text">
+                          {errors.rooms_attributes[index].description}
+                        </div>
+                      )}
+                  </FormItem>
+                  <div className="room-details-container">
+                    <FormItem label="Bed Type" className="form-item">
+                      <Select
+                        name={`rooms_attributes[${index}].bed_type_id`}
+                        onChange={handleChange}
+                        value={room.bed_type_id}
+                        className="common-input"
+                      >
+                        <option value="">Select bed type</option>
+                        {bedTypes.map((bedType) => (
+                          <option key={bedType.id} value={bedType.id}>
+                            {bedType.name}
+                          </option>
+                        ))}
+                      </Select>
+                      {errors.rooms_attributes &&
+                        Array.isArray(errors.rooms_attributes) &&
+                        typeof errors.rooms_attributes[index] === "object" &&
+                        errors.rooms_attributes[index] !== null &&
+                        errors.rooms_attributes[index].bed_type_id && (
+                          <div className="error-text">
+                            {errors.rooms_attributes[index].bed_type_id}
+                          </div>
+                        )}
+                    </FormItem>
+                    <FormItem label="Room Size (sq ft)" className="form-item">
+                      <Input
+                        type="text"
+                        name={`rooms_attributes[${index}].size`}
+                        placeholder="Enter room size"
+                        onChange={handleChange}
+                        value={room.size}
+                        className="common-input"
+                      />
+                      {errors.rooms_attributes &&
+                        Array.isArray(errors.rooms_attributes) &&
+                        typeof errors.rooms_attributes[index] === "object" &&
+                        errors.rooms_attributes[index] !== null &&
+                        errors.rooms_attributes[index].size && (
+                          <div className="error-text">
+                            {errors.rooms_attributes[index].size}
+                          </div>
+                        )}
+                    </FormItem>
+                    <FormItem label="Room Type" className="form-item">
+                      <Select
+                        name={`rooms_attributes[${index}].room_type_id`}
+                        onChange={handleChange}
+                        value={room.room_type_id}
+                        className="common-input"
+                      >
+                        <option value="">Select room type</option>
+                        {roomTypes.map((roomType) => (
+                          <option key={roomType.id} value={roomType.id}>
+                            {roomType.name}
+                          </option>
+                        ))}
+                      </Select>
+                      {errors.rooms_attributes &&
+                        Array.isArray(errors.rooms_attributes) &&
+                        typeof errors.rooms_attributes[index] === "object" &&
+                        errors.rooms_attributes[index] !== null &&
+                        errors.rooms_attributes[index].room_type_id && (
+                          <div className="error-text">
+                            {errors.rooms_attributes[index].room_type_id}
+                          </div>
+                        )}
+                    </FormItem>
+                  </div>
+                  <FormItem>
+                    <h2 className="section-title">Amenities</h2>
+                    <div className="checkbox-grid">
+                      {amenities.map((amenity) => (
+                        <Checkbox
+                          key={amenity.id.toString()}
+                          id={amenity.id.toString()}
+                          label={amenity.name}
+                          name={`rooms_attributes[${index}].amenities`}
+                          onChange={(checked) =>
+                            handleAmenitiesChange(
+                              amenity?.id,
+                              index,
+                              values,
+                              setFieldValue
+                            )
+                          }
+                          checked={values.rooms_attributes[
+                            index
+                          ]?.amenities?.some(
+                            (item) =>
+                              item.amenity_id === amenity.id ||
+                              item.id === amenity.id
+                          )}
+                        />
+                      ))}
+                    </div>
+                  </FormItem>
+                  <FormItem>
+                    <h2 className="section-title">Features</h2>
+                    <div className="checkbox-grid">
+                      {features.map((feature) => (
+                        <Checkbox
+                          key={feature.id.toString()}
+                          id={feature.id.toString()}
+                          label={feature.name}
+                          className="common-input"
+                          name={`rooms_attributes[${index}].features`}
+                          onChange={(checked) =>
+                            handleFeaturesChange(
+                              feature?.id,
+                              index,
+                              values,
+                              setFieldValue
+                            )
+                          }
+                          checked={values.rooms_attributes[
+                            index
+                          ]?.features?.some(
+                            (item) =>
+                              item.feature_id === feature.id ||
+                              item.id === feature.id
+                          )}
+                        />
+                      ))}
+                    </div>
+                  </FormItem>
+                  <div key={index}>
+                    <div className="image-upload-section">
+                      <span className="image-upload-title">Room images</span>
+                      <div className="image-upload-content">
+                        <RoomImagesUploader key={index} index={index} />
+                        {isLoading ? (
+                          <div className="image-preview-container">
+                            {Array.from({
+                              length: room.existing_room_images?.length,
+                            }).map((_, previewIndex) => (
+                              <div
+                                key={previewIndex}
+                                className="image-placeholder"
+                              ></div>
+                            ))}
+                          </div>
+                        ) : (
+                          <DragDropContext
+                            onDragEnd={(result) => {
+                              const { source, destination } = result;
+                              if (!destination) return;
+                              const existingImages =
+                                room.existing_room_images || [];
+                              const newImages = room.room_images || [];
+                              const combinedImages = [
+                                ...existingImages,
+                                ...newImages,
+                              ];
+
+                              // Reorder the images
+                              const reorderedImages = [...combinedImages];
+                              const [removed] = reorderedImages.splice(
+                                source.index,
+                                1
+                              );
+                              reorderedImages.splice(
+                                destination.index,
+                                0,
+                                removed
+                              );
+                              const newPosition = destination.index + 1;
+                              if (removed.id) {
+                                setReorderImages((prev) => {
+                                  const updated = prev.filter(
+                                    (item) =>
+                                      item.position !== newPosition ||
+                                      item.blob_id === removed.id
+                                  );
+                                  return [
+                                    ...updated,
+                                    {
+                                      blob_id: removed.id,
+                                      position: newPosition,
+                                    },
+                                  ];
+                                });
+                              }
+
+                              const updatedExistingRoomImages =
+                                reorderedImages.filter((item) => item.id);
+                              const updatedRoomImages = reorderedImages.filter(
+                                (item) => !item.id
+                              );
+                              setFieldValue(
+                                `rooms_attributes[${index}].existing_room_images`,
+                                updatedExistingRoomImages
+                              );
+                              setFieldValue(
+                                `rooms_attributes[${index}].room_images`,
+                                updatedRoomImages
+                              );
+                            }}
+                          >
+                            <Droppable
+                              droppableId={`room-images-${index}`}
+                              direction="horizontal"
+                            >
+                              {(provided) => (
+                                <div
+                                  className="image-preview-container"
+                                  {...provided.droppableProps}
+                                  ref={provided.innerRef}
+                                >
+                                  {(room.existing_room_images || []).map(
+                                    (image, previewIndex) => (
+                                      <Draggable
+                                        key={`existing-image-${
+                                          image.id || previewIndex
+                                        }`}
+                                        draggableId={`existing-image-${
+                                          image.id || previewIndex
+                                        }`}
+                                        index={previewIndex}
+                                      >
+                                        {(provided) => (
+                                          <div
+                                            ref={provided.innerRef}
+                                            {...provided.draggableProps}
+                                            {...provided.dragHandleProps}
+                                            className="image-wrapper"
+                                          >
+                                            <div className="image-container">
+                                              <NcImage
+                                                src={image.url || image}
+                                                alt={`Room ${index + 1} Image ${
+                                                  previewIndex + 1
+                                                }`}
+                                                className="image"
+                                              />
+                                            </div>
+                                            <button
+                                              type="button"
+                                              onClick={() =>
+                                                handleRemoveRoomImage(
+                                                  previewIndex,
+                                                  index,
+                                                  values,
+                                                  setFieldValue
+                                                )
+                                              }
+                                              className="remove-image-button"
+                                            >
+                                              <svg
+                                                className="remove-image-icon"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                stroke="currentColor"
+                                              >
+                                                <path
+                                                  strokeLinecap="round"
+                                                  strokeLinejoin="round"
+                                                  strokeWidth={2}
+                                                  d="M6 18L18 6M6 6l12 12"
+                                                />
+                                              </svg>
+                                            </button>
+                                          </div>
+                                        )}
+                                      </Draggable>
+                                    )
+                                  )}
+                                  {(room.room_images || []).map(
+                                    (image, newIndex) => {
+                                      const previewIndex =
+                                        (room.existing_room_images?.length ||
+                                          0) + newIndex;
+                                      const previewUrl =
+                                        roomImagePreviews[index]?.[newIndex]
+                                          ?.previewUrl ||
+                                        (image instanceof File
+                                          ? URL.createObjectURL(image)
+                                          : null);
+
+                                      return (
+                                        <Draggable
+                                          key={`new-image-${previewIndex}`}
+                                          draggableId={`new-image-${previewIndex}`}
+                                          index={previewIndex}
+                                        >
+                                          {(provided) => (
+                                            <div
+                                              ref={provided.innerRef}
+                                              {...provided.draggableProps}
+                                              {...provided.dragHandleProps}
+                                              className="image-wrapper"
+                                            >
+                                              <div className="image-container">
+                                                <NcImage
+                                                  src={previewUrl || image}
+                                                  alt={`Room ${
+                                                    index + 1
+                                                  } Image ${previewIndex + 1}`}
+                                                  className="image"
+                                                />
+                                              </div>
+                                              <button
+                                                type="button"
+                                                onClick={() =>
+                                                  handleRemoveRoomImage(
+                                                    previewIndex,
+                                                    index,
+                                                    values,
+                                                    setFieldValue
+                                                  )
+                                                }
+                                                className="remove-image-button"
+                                              >
+                                                <svg
+                                                  className="remove-image-icon"
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                  fill="none"
+                                                  viewBox="0 0 24 24"
+                                                  stroke="currentColor"
+                                                >
+                                                  <path
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"
+                                                    strokeWidth={2}
+                                                    d="M6 18L18 6M6 6l12 12"
+                                                  />
+                                                </svg>
+                                              </button>
+                                            </div>
+                                          )}
+                                        </Draggable>
+                                      );
+                                    }
+                                  )}
+                                  {provided.placeholder}
+                                </div>
+                              )}
+                            </Droppable>
+                          </DragDropContext>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+              <div
+                className="room-actions-container"
+                style={{
+                  display: "flex",
+                  gap: "10px",
+                  flexWrap: "wrap",
+                }}
+              >
+                {values.rooms_attributes.length > 1 && (
+                  <ButtonPrimary
+                    type="button"
+                    onClick={() => {
+                      setCount((prev) => prev - 1);
+                      setFieldValue(
+                        "rooms_attributes",
+                        values.rooms_attributes.filter(
+                          (_, idx) => idx !== values.rooms_attributes.length - 1
+                        )
+                      );
+                    }}
+                    className="action-button"
+                  >
+                    Remove Last Room
+                  </ButtonPrimary>
+                )}
+                <ButtonPrimary
+                  type="button"
+                  onClick={() => {
+                    setCount((prev) => prev + 1);
+                    setFieldValue("rooms_attributes", [
+                      ...values.rooms_attributes,
+                      initialRoomValues,
+                    ]);
+                  }}
+                  className="action-button"
+                >
+                  Add Another Room
+                </ButtonPrimary>
+              </div>
+
+              <div className="form-actions">
+                <ButtonPrimary href={`/property-4/${slug}`}>
+                  Go back
+                </ButtonPrimary>
+                <ButtonPrimary
+                  type="submit"
+                  onClick={handleSubmit}
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? "Loading..." : "Continue"}
+                </ButtonPrimary>
+              </div>
+            </form>
+          )}
+        </Formik>
+      </div>
+    </CommonLayout>
+  );
+};
+
+export default Rooms;