"use client";
import React, { Suspense, useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import MasterLayout from "@/masterLayout/MasterLayout";
import client from "@auth";
import { gradientClasses } from "@utils/constant.utils";
import PageLoader from "@/components/common-component/PageLoader";
import PageNoData from "@/components/common-component/PageNoData";
import Breadcrumb from "@/components/Breadcrumb";
import { Icon } from "@iconify/react";
import { Baseurl, ImageBase } from "@utils/BaseUrl.utils";
import axios from "axios";

const SidesPageInner = () => {
    const router = useRouter();
    const searchParams = useSearchParams();
    const sidesCategoryName = decodeURIComponent(searchParams.get("sidescategoryname"));
    const [showModal, setShowModal] = useState(false);
    const [editMode, setEditMode] = useState(false);
    const [editingRoomId, setEditingRoomId] = useState(null);
    const [roomData, setRoomData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [formData, setFormData] = useState({
        sidename: "",
        description: "",
        price: "",
        item_image: null,
        image_preview: null,
    });
    const [errors, setErrors] = useState({});
    const [deleteConfirm, setDeleteConfirm] = useState({ show: false, id: null });
    const [restaruntBranch, setRestaruntBranch] = useState("");

    // Sides Category
    const [activeCategory, setActiveCategory] = useState("")
    const [sidesCategoryData, setSidesCategoryData] = useState(null);
    const [showSidesCategoryModal, setShowSidesCategoryModal] = useState(false);
    const [isSidesCategoryEditMode, setIsSidesCategoryEditMode] = useState(false);
    const [selectedSidesCategoryId, setSelectedSidesCategoryId] = useState(null);
    const [sidesCategoryFormData, setSidesCategoryFormData] = useState({
        sidesCategoryname: "",
        description: "",
    });
    const [sidesCategoryErrors, setSidesCategoryErrors] = useState({});
    const [sidesCategoryDeleteConfirm, setSidesCategoryDeleteConfirm] = useState({ show: false, id: null });

    useEffect(() => {
        const restarunt = localStorage.getItem("restaurantbranch");
        setRestaruntBranch(restarunt);
    }, []);

    useEffect(() => {
        const isLogin = JSON.parse(localStorage.getItem("isLogin"));
        if (!isLogin) {
            router.push(`/admin?restaurantbranch=${restaruntBranch}`);
        }
    }, [router]);

    useEffect(() => {
        if (restaruntBranch && restaruntBranch !== "")
            getSidesCategory();
    }, [restaruntBranch]);



    const getSidesCategory = async () => {
        try {
            setLoading(true);
            // const res = await client?.get(`/Dine360 Floor?fields=[\"*\"]&limit_page_length=100`);
            const res = await client?.get(`/Dine360%20Food%20Sides%20Category?fields=[%22*%22]&limit_page_length=100&filters=[["restaurantbranch","=","${restaruntBranch}"]]`);
            setSidesCategoryData(res?.data?.data);
            getSideData(res?.data?.data[0]?.name);
            setActiveCategory(res?.data?.data[0]?.name)
        } catch (error) {
            console.error("Error fetching floor data:", error);
            setError(error?.message || "Failed to fetch floor data");
        } finally {
            setLoading(false);
        }
    };


    // useEffect(() => {
    //     if (sidesCategoryName) {
    //         getSideData();
    //     }
    // }, [sidesCategoryName]);

    const getSideData = async (sidesCategoryName) => {
        try {
            setLoading(true);
            setError(null);
            const roomRes = await client.get(
                `/Dine360%20Food%20Sides?fields=[%22*%22]&limit_page_length=100&filters=[["sidecategoryid","=","${sidesCategoryName}"]]`
            );
            setRoomData(roomRes?.data?.data || []);
        } catch (error) {
            console.error("Error fetching data:", error);
            setError(error?.message || "Failed to fetch side data");
        } finally {
            setLoading(false);
        }
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData((prev) => ({ ...prev, [name]: value }));
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        const newErrors = {};
        if (!formData.sidename.trim()) newErrors.sidename = "Side Name is required";
        if (!formData.description.trim()) newErrors.description = "Description is required";
        if (!formData.price) newErrors.price = "Price is required";
        if (!editMode && !formData.item_image) {
            newErrors.item_image = "Item image is required";
        }
        setErrors(newErrors);
        if (Object.keys(newErrors).length > 0) return;

        const body = {
            sidename: formData.sidename,
            description: formData.description,
            price: parseFloat(formData.price),
            sidecategoryid: activeCategory,
            restaurantbranch: restaruntBranch,
        };

        try {
            const formDataToSend = new FormData();
            formDataToSend.append("endpoint", "Dine360 Food Sides");
            formDataToSend.append("body", JSON.stringify(body));
            if (formData.item_image instanceof File) {
                formDataToSend.append("file", formData.item_image);
                formDataToSend.append("fileid", "item_image");
            }

            if (editMode) {
                formDataToSend.append("data", JSON.stringify({ name: editingRoomId }));
                await client.put(`${Baseurl}/Upload-Image-To-Frappe`, formDataToSend, {
                    headers: {
                        Authorization: "token 482beca79d9c005:b8778f51fcca82b",
                    },
                });
            } else {
                await axios.post(`${Baseurl}/Upload-Image-To-Frappe`, formDataToSend, {
                    headers: {
                        Authorization: "token 482beca79d9c005:b8778f51fcca82b",
                    },
                });
            }

            getSideData(activeCategory);
            resetForm();
        } catch (error) {
            console.error("❌ Submission error:", error);
            const backendError = error?.response?.data?.exception || "";
            if (backendError.includes("Data too long for column 'item_image'")) {
                setErrors((prev) => ({
                    ...prev,
                    item_image: "Data too long for column 'item_image'",
                }));
            } else {
                alert("Submission failed. Please try again.");
            }
        }
    };

    const handleEdit = (room) => {
        setFormData({
            sidename: room.sidename || "",
            description: room.description || "",
            price: room.price || "",
            item_image: room.item_image || null,
            image_preview: null,
        });
        setEditingRoomId(room.name);
        setEditMode(true);
        setShowModal(true);
    };

    const resetForm = () => {
        if (formData.image_preview) URL.revokeObjectURL(formData.image_preview);
        setFormData({
            sidename: "",
            description: "",
            price: "",
            item_image: null,
            image_preview: null,
        });
        setErrors({});
        setEditMode(false);
        setEditingRoomId(null);
        setShowModal(false);
    };

    const handleDelete = async () => {
        try {
            await client.delete(`/Dine360%20Food%20Sides/${deleteConfirm?.id}`);
            setDeleteConfirm({ show: false, id: null });
            getSideData(activeCategory);
        } catch (error) {
            alert("Error deleting. It might be linked to other data.");
        }
    };


    // sides category


    const handleSidesCategoryClick = async (catname) => {
        await getSideData(catname);
        setActiveCategory(catname);
    };

    const handleSidesCategoryChange = (e) => {
        const { name, value } = e.target;
        setSidesCategoryFormData((prev) => ({ ...prev, [name]: value }));
    };

    const handleSidesCategorySubmit = async (e) => {
        e.preventDefault();

        const newErrors = {};
        Object.entries(sidesCategoryFormData).forEach(([key, value]) => {
            if (!value.trim()) newErrors[key] = `${key} is required`;
        });
        setSidesCategoryErrors(newErrors);
        if (Object.keys(newErrors).length > 0) return;

        const body = {
            // ...(isSidesCategoryEditMode && { name: selectedFloorId }), // only adds `name` if editing
            sidecategoryname: sidesCategoryFormData?.sidesCategoryname,
            description: sidesCategoryFormData?.description,
            restaurantbranch: restaruntBranch
        };
        try {
            if (isSidesCategoryEditMode) {
                await client.put(`/Dine360%20Food%20Sides%20Category/${selectedSidesCategoryId}`, body);
            } else {
                await client.post(`/Dine360%20Food%20Sides%20Category`, body);
            }
            getSidesCategory();
            resetSidesCategoryForm();
        } catch (error) {
            if (
                error?.response?.data?.exception?.includes("DuplicateEntryError") ||
                error?.response?.data?.message?.includes("Duplicate entry")
            ) {
                alert("SidesCategory with this name already exists. Please use a different name.");
            } else if (
                error?.response?.data?.exception?.includes("UniqueValidationError") ||
                error?.response?.data?.message?.includes("UniqueValidationError entry")
            ) {
                alert("SidesCategory with this name already exists. Please use a different name.");
            } else {
                alert("An error occurred. Please try again.");
            }
        }
    };

    const resetSidesCategoryForm = () => {
        setSidesCategoryFormData({
            sidesCategoryname: "", description: "",
        });
        setShowSidesCategoryModal(false);
        setIsSidesCategoryEditMode(false);
        setSelectedSidesCategoryId(null);
        setSidesCategoryErrors({});
    };

    const handleSidesCategoryEdit = (sidesCategory) => {
        setIsSidesCategoryEditMode(true);
        setSelectedSidesCategoryId(sidesCategory.name);
        setSidesCategoryFormData({
            sidesCategoryname: sidesCategory.sidecategoryname || "",
            description: sidesCategory.description || "",
        });
        setShowSidesCategoryModal(true);
    };

    const handleSidesCategoryDelete = async () => {
        try {
            await client.delete(`/Dine360%20Food%20Sides%20Category/${sidesCategoryDeleteConfirm.id}`);
            setSidesCategoryDeleteConfirm({ show: false, id: null });
            getSidesCategory();
        } catch (error) {
            if (
                error?.response?.data?.exception?.includes("DuplicateEntryError") ||
                error?.response?.data?.message?.includes("Duplicate entry")
            ) {
                alert("SidesCategory with this name already exists. Please use a different name.");
            } else if (error?.response?.data?.exception?.includes("LinkExistsError") ||
                error?.response?.data?.message?.includes("LinkExistsError")) {
                alert(" Cannot delete or cancel because Dine360 SidesCategory three is linked with Dine360 Room ");
            }
        }
    };

    return (
        <div className="container-fluid" style={{ marginBottom: "100px" }}>
            <div className="">
                <div className="">
                    <div className="row gy-3 gx-3 gx-lg-5 gy-lg-5 justify-content-center">

                        <div className="col-xl-3 col-lg-3 col-md-4">
                            <div className="d-inline-block" style={{width:"100%"}}>
                                <div className="card p-0 overflow-hidden radius-12 h-100">
                                    <div className="card-body p-24">
                                        <ul className="d-flex flex-column gap-2">
                                            <li
                                                className="nav-item border rounded-2 px-3 py-3 d-flex align-items-center gap-3 justify-content-between"
                                                style={{ cursor: "pointer" }}
                                                onClick={() => setShowSidesCategoryModal(true)}
                                            >
                                                <div className="d-flex align-items-center gap-3 ">
                                                    <Icon icon="lucide:plus" className="text-lg w-28-px h-28-px " />
                                                    <span className="fw-semibold">New</span>
                                                </div>
                                            </li>
                                            {sidesCategoryData?.map((sidesCategory) => (
                                                <li
                                                    key={sidesCategory?.name}
                                                    className={`nav-item border rounded-2 px-3 py-3 bg-border-theme d-flex align-items-center gap-3 position-relative 
                                                    ${activeCategory === sidesCategory.name ? "bg-theme" : ""}`
                                                    }
                                                    role="presentation"
                                                    onClick={() => handleSidesCategoryClick(sidesCategory?.name)}
                                                    style={{ cursor: "pointer" }}
                                                >
                                                    <img
                                                        src="/assets/images/menu/menu-icons/all-menu.png"
                                                        alt="menu"
                                                        className="w-28-px h-28-px"
                                                    />
                                                    <span className="line-height-1">{sidesCategory?.sidecategoryname}</span>
                                                    <div className="position-absolute top-0 end-0 me-1 mt-1" onClick={(e) => e.stopPropagation()}>
                                                        <div className="dropdown">
                                                            <button
                                                                className="btn px-1 py-1 d-flex align-items-center text-primary-light"
                                                                type="button"
                                                                data-bs-toggle="dropdown"
                                                                aria-expanded="false"
                                                            >
                                                                <Icon icon="entypo:dots-three-vertical" className="menu-icon" />
                                                            </button>
                                                            <ul className="dropdown-menu">
                                                                <li>
                                                                    <Link
                                                                        href="#"
                                                                        className='dropdown-item px-16 py-8 d-flex align-items-center gap-2  rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900'
                                                                        onClick={(e) => {
                                                                            e.preventDefault();
                                                                            handleSidesCategoryEdit(sidesCategory);
                                                                        }}
                                                                    > <Icon icon='lucide:edit' className='menu-icon' />
                                                                        Edit
                                                                    </Link>
                                                                </li>
                                                                <li>
                                                                    <Link
                                                                        href="#"
                                                                        className='dropdown-item px-16 py-8 d-flex align-items-center gap-2  rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900'
                                                                        onClick={(e) => {
                                                                            e.preventDefault();
                                                                            setSidesCategoryDeleteConfirm({ show: true, id: sidesCategory.name });
                                                                        }}
                                                                    >
                                                                        <Icon
                                                                            icon='fluent:delete-24-regular'
                                                                            className='menu-icon'
                                                                        />
                                                                        Delete
                                                                    </Link>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-xl-9 col-lg-9 col-md-8">
                            <div className="row gy-3 gx-3 gx-lg-5 gy-lg-5">
                                <div className="col-xxl-3 col-xl-3 col-lg-4 col-sm-6 col-6 cursor-pointer">
                                    <div className="card p-3 shadow-2 radius-8 h-100 border border-white position-relative">
                                        <div className="card-body text-center p-3 d-flex justify-content-center align-items-center">
                                            <button className="btn radius-8 px-20 py-11" onClick={() => setShowModal(true)}>
                                                <Icon icon="lucide:plus" className="text-lg w-50-px h-50-px " />
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {loading ? (
                                    <PageLoader />
                                ) : (
                                    roomData?.map((room, index) => {
                                        const gradientClass = gradientClasses[index % gradientClasses.length];
                                        return (
                                            <div className="col-xxl-3 col-xl-3 col-lg-4 col-sm-6 col-6 cursor-pointer" key={room?.name}>
                                                <div className="card p-3 shadow-2 radius-8 h-100 border border-white position-relative">
                                                    <div className="position-absolute top-0 end-0 me-1 mt-1 d-flex gap-2">
                                                        <div className="dropdown">
                                                            <button className='btn px-1 py-1 d-flex align-items-center text-primary-light' type='button' data-bs-toggle='dropdown'>
                                                                <Icon icon='entypo:dots-three-vertical' className='menu-icon' />
                                                            </button>
                                                            <ul className='dropdown-menu'>
                                                                <li>
                                                                    <Link href="#" className='dropdown-item  px-16 py-8 d-flex align-items-center gap-2  rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900' onClick={(e) => { e.preventDefault(); handleEdit(room); }}>
                                                                        <Icon icon='lucide:edit' className='menu-icon' /> Edit
                                                                    </Link>
                                                                </li>
                                                                <li>
                                                                    <Link href="#" className='dropdown-item  px-16 py-8 d-flex align-items-center gap-2  rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900' onClick={(e) => { e.preventDefault(); setDeleteConfirm({ show: true, id: room.name }); }}>
                                                                        <Icon icon='fluent:delete-24-regular' className='menu-icon' /> Delete
                                                                    </Link>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div className="card-body text-center p-3">
                                                        <img src={`${ImageBase}/${room.item_image}`} alt="" className="w-100-px h-100-px rounded-circle object-fit-cover" />
                                                        <h6 className="text-md mb-0 mt-3">{room?.sidename}</h6>
                                                        <span className="text-secondary-light text-sm">${room.price.toFixed(2)}</span>
                                                        {/* <h6 className="text-md mb-0 mt-1">${room.price.toFixed(2)}</h6> */}
                                                    </div>
                                                </div>
                                            </div>
                                        );
                                    })
                                )}
                            </div>
                        </div>


                    </div>
                </div>
            </div>


            {/* sides category */}
            {/* Create/Edit Modal */}
            {showSidesCategoryModal && (
                <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">
                            <div className="modal-header border-0 pb-0">
                                <h6 className="modal-title text-lg">
                                    {isSidesCategoryEditMode ? "Edit SidesCategory" : "Create SidesCategory"}
                                </h6>
                                <button type="button" className="btn-close" onClick={resetSidesCategoryForm}></button>
                            </div>
                            <div className="modal-body">
                                <form onSubmit={handleSidesCategorySubmit}>
                                    <div className="mb-3">
                                        <label className="form-label">SidesCategory Name</label>
                                        <input
                                            type="text"
                                            className={`form-control ${sidesCategoryErrors.sidesCategoryname ? "is-invalid" : ""}`}
                                            name="sidesCategoryname"
                                            value={sidesCategoryFormData.sidesCategoryname}
                                            onChange={handleSidesCategoryChange}
                                        />
                                        {sidesCategoryErrors.sidesCategoryname && (
                                            <div className="invalid-feedback">{sidesCategoryErrors.sidesCategoryname}</div>
                                        )}
                                    </div>

                                    <div className="mb-3">
                                        <label className="form-label">Description</label>
                                        <textarea
                                            className={`form-control ${sidesCategoryErrors.description ? "is-invalid" : ""}`}
                                            name="description"
                                            value={sidesCategoryFormData.description}
                                            onChange={handleSidesCategoryChange}
                                            rows="3"
                                        ></textarea>
                                        {sidesCategoryErrors.description && (
                                            <div className="invalid-feedback">{sidesCategoryErrors.description}</div>
                                        )}
                                    </div>

                                    {/* <div className="mb-3">
                                        <label className="form-label">Branch</label>
                                        <select
                                            className={`form-select ${sidesCategoryErrors.branch ? "is-invalid" : ""}`}
                                            name="branch"
                                            value={sidesCategoryFormData.branch}
                                            onChange={handleChange}
                                        >
                                            <option value="">Select Branch</option>
                                            {branchData.map((branch) => (
                                                <option key={branch.name} value={branch.name}>
                                                    {branch.branch}
                                                </option>
                                            ))}
                                        </select>
                                        {sidesCategoryErrors.branch && (
                                            <div className="invalid-feedback">{sidesCategoryErrors.branch}</div>
                                        )}
                                    </div> */}

                                    <div className="d-flex justify-content-end">
                                        <button type="submit" className="btn btn-bg-theme">
                                            {isSidesCategoryEditMode ? "Update" : "Submit"}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Delete Confirmation Modal */}
            {sidesCategoryDeleteConfirm.show && (
                <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">

                            <div className="modal-body">
                                <div className="d-flex justify-content-between mb-1">
                                    <h6 className="text-lg mb-0">Confirm Delete</h6>
                                    <button
                                        type="button"
                                        className="btn-close"
                                        onClick={() => setSidesCategoryDeleteConfirm({ show: false, id: null })}
                                    ></button>
                                </div>
                                <p className="m-0">Are you sure you want to delete this sidesCategory?</p>
                                <div className="d-flex justify-content-end gap-2 mt-1 ">
                                    <button
                                        className="btn btn-outline-danger px-14 py-6 text-sm"
                                        onClick={() => setSidesCategoryDeleteConfirm({ show: false, id: null })}
                                    >
                                        Cancel
                                    </button>
                                    <button className="btn btn-danger px-14 py-6 text-sm" onClick={handleSidesCategoryDelete}>
                                        Delete
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}


            {/*Sides Modal */}
            {showModal && (
                <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">
                            <div className="modal-header border-0 pb-0">
                                <h6 className="modal-title">{editMode ? "Edit Side" : "Create Side"}</h6>
                                <button type="button" className="btn-close" onClick={resetForm}></button>
                            </div>
                            <div className="modal-body">
                                <form onSubmit={handleSubmit}>
                                    <div className="mb-3">
                                        <label className="form-label">Side Name</label>
                                        <input type="text" className={`form-control ${errors.sidename ? "is-invalid" : ""}`} name="sidename" value={formData.sidename} onChange={handleChange} />
                                        {errors.sidename && <div className="invalid-feedback">{errors.sidename}</div>}
                                    </div>

                                    <div className="mb-3">
                                        <label className="form-label">Description</label>
                                        <textarea className={`form-control ${errors.description ? "is-invalid" : ""}`} name="description" value={formData.description} onChange={handleChange}></textarea>
                                        {errors.description && <div className="invalid-feedback">{errors.description}</div>}
                                    </div>

                                    <div className="mb-3">
                                        <label className="form-label">Price</label>
                                        <input type="number" className={`form-control ${errors.price ? "is-invalid" : ""}`} name="price" value={formData.price} onChange={handleChange} />
                                        {errors.price && <div className="invalid-feedback">{errors.price}</div>}
                                    </div>

                                    <div className="mb-3">
                                        <label className="form-label">Item Image</label>
                                        <div className="d-flex align-items-center gap-3">
                                            <input
                                                type="file"
                                                accept="image/*"
                                                className={`form-control ${errors.item_image ? "is-invalid" : ""}`}
                                                onChange={(e) => {
                                                    const file = e.target.files[0];
                                                    if (!file) return;

                                                    if (!file.type.startsWith("image/")) {
                                                        setErrors(prev => ({ ...prev, item_image: "Only image files allowed." }));
                                                        return;
                                                    }

                                                    if (file.size / 1024 / 1024 > 1) {
                                                        setErrors(prev => ({ ...prev, item_image: "Max size 1MB" }));
                                                        return;
                                                    }

                                                    const previewURL = URL.createObjectURL(file);
                                                    setFormData(prev => ({
                                                        ...prev,
                                                        item_image: file,
                                                        image_preview: previewURL,
                                                    }));
                                                    setErrors(prev => ({ ...prev, item_image: null }));
                                                }}
                                            />
                                            {(formData.image_preview || formData.item_image) && (
                                                <div style={{ position: "relative", width: "60px", height: "60px" }}>
                                                    <img
                                                        src={
                                                            formData.image_preview
                                                                ? formData.image_preview
                                                                : `${ImageBase}/${formData.item_image}`
                                                        }
                                                        alt="preview"
                                                        className="img-thumbnail"
                                                        style={{ objectFit: "cover", width: "100%", height: "100%" }}
                                                    />
                                                    <button
                                                        type="button"
                                                        className="btn btn-sm btn-danger position-absolute top-0 end-0 p-1 pt-0 pb-0"
                                                        onClick={() =>
                                                            setFormData(prev => ({
                                                                ...prev,
                                                                item_image: null,
                                                                image_preview: null,
                                                            }))
                                                        }
                                                    >
                                                        ×
                                                    </button>
                                                </div>
                                            )}
                                        </div>
                                        {errors.item_image && <div className="invalid-feedback d-block">{errors.item_image}</div>}
                                    </div>

                                    <div className="d-flex justify-content-end">
                                        <button type="submit" className="btn btn-bg-theme">{editMode ? "Update" : "Submit"}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Delete Modal */}
            {deleteConfirm.show && (
                <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">
                            <div className="modal-body">
                                <div className="d-flex justify-content-between mb-1">
                                    <h6 className="text-lg mb-0">Confirm Delete</h6>
                                    <button type="button" className="btn-close" onClick={() => setDeleteConfirm({ show: false, id: null })}></button>
                                </div>
                                <p>Are you sure you want to delete this item?</p>
                                <div className="d-flex justify-content-end gap-2 mt-1">
                                    <button className="btn btn-outline-danger" onClick={() => setDeleteConfirm({ show: false, id: null })}>Cancel</button>
                                    <button className="btn btn-danger" onClick={handleDelete}>Delete</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};
const SidesPage = () => (
    <MasterLayout>
        <Breadcrumb title="Sides Management" />
        <Suspense fallback={<PageLoader />}>
            <SidesPageInner />
        </Suspense>
    </MasterLayout>
);

export default SidesPage;
