Untitled

import React, { useEffect, useState, useRef, Fragment } from "react";
import { Helmet } from "react-helmet";
import PropTypes from "prop-types";
import {
  Button,
  DialogTitle,
  Grid,
  IconButton,
  Typography,
} from "@material-ui/core";
import { injectIntl } from "react-intl";
import { withStyles } from "@material-ui/core/styles";
import LoadingSpinner from "../../spinner";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import swal from "sweetalert";
import ShowpaymentModel from "./ShowpaymentModel";
import Dinutest from "../Dialer/addClient";
import { getUserList, updateServices } from "../../../api/auth";
import CloseIcon from "@material-ui/icons/Close";
import Vishal from "../Dialer/vishal";
import { getServicesList, deleteServicesList } from "../../../api/auth";
import Modal from "react-bootstrap/Modal";
import Delete from "@material-ui/icons/Delete";
import "./servicelist.css";
import "../../../components/Bills/search.css";
import { ActionButton } from "../../../utils/buttons";
import BadgeOutlinedIcon from "@mui/icons-material/BadgeOutlined";
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
import RequestQuoteOutlinedIcon from "@mui/icons-material/RequestQuoteOutlined";
import EqualizerOutlinedIcon from "@mui/icons-material/EqualizerOutlined";
import Tooltip from "@material-ui/core/Tooltip";
import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
import CreateOutlinedIcon from "@mui/icons-material/CreateOutlined";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import { Avatar, Stack } from "@mui/material";
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";
import { Image } from "@mui/icons-material";
import { RiImageCircleFill } from "react-icons/ri";
import { IoPricetagsOutline } from "react-icons/io5";
import { IoSettingsOutline } from "react-icons/io5";
import { TbFileDescription } from "react-icons/tb";


const styles = (theme) => ({
  useravatar: {
    textAlign: "center",
    verticalAlign: "middle",
  },

  dialogCustomizedWidth: {
    width: "100%",
    margin: theme.spacing(0),
  },
});

const styl = {
  error: {
    background: "#dc3545",
    color: "#fff",
    borderRadius: 20,
    borderColor: "red",
    padding: "2px 20px",
  },
  cancel: {
    color: "#fff",
    background: "#198754",
    borderRadius: 20,
    borderColor: "red",
    padding: "2px 20px",
  },
};

function ServiceList(props) {
  const [openmodel, setOpenmodel] = useState(false);
  const { classes } = props;
  const [serviceList, setServiceList] = useState([]);
  const [show, setShow] = React.useState(false);
  const [waiting, setWaiting] = useState(true);
  const [paymentshowmodel, setPaymentshowmodel] = useState("");
  const [setData, setAllData] = useState();
  const [loading, setLoading] = useState(false);
  const [selectedList, setSelectedList] = useState(null);
  const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false);
  const [selectedListForDeletion, setSelectedListForDeletion] = useState(null);
  const [snackbarOpen, setSnackbarOpen] = useState(false);
  const [snackbarMessage, setSnackbarMessage] = useState("");

  const openSnackbar = (message) => {
    setSnackbarMessage(message);
    setSnackbarOpen(true);
  };

  const closeSnackbar = () => {
    setSnackbarOpen(false);
  };

  const handlebuttonshowModel = (valids) => {
    const getuserid = valids;
    setPaymentshowmodel(getuserid);
  };
  const handleUsersearchcloseModel = () => {
    setPaymentshowmodel("");
  };

  const deleteList = async (id, list) => {
    try {
      setSelectedList(id);
      setSelectedListForDeletion(list);
      setDeleteConfirmationOpen(true);
      await deleteServicesList(id);
      setLoading(true);
      const serviceList = await getServicesList();
      setLoading(false);
      setServiceList(serviceList);
      openSnackbar("Service successfully deleted");
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  const handleClickOpen = () => {
    setShow(true);
  };
  const handleAddFormClose = () => {
    setShow(false);
  };

  const onSubmit = async () => {
    setShow(false);
    const serviceList = await getServicesList();
    setServiceList(serviceList);
    openSnackbar("Service successfully added");
  };

  useEffect(() => {
    getServicesList()
      .then((serviceList) => {
        setServiceList(serviceList);
        setWaiting(false);
      })
      .catch((e) => {
        setWaiting(false);
        console.log(e);
      });
  }, []);

  const loadServiceList = async () => {
    const serviceList = await getServicesList();
    setServiceList(serviceList);
  };

  const handleClose = () => setOpenmodel(false);
  const [service, setService] = useState(null);

  const handleShow = (service) => {
    setOpenmodel(true);
    setService(service);
    setTimeout(() => {
      form.current.name.value = service.name;
      form.current.price.value = service.price;
      form.current.description.value = service.description;
      form.current.image.value = service.image;
    }, 1000);
  };

  const [selectedImage, setSelectedImage] = useState(null);
  const [files] = useState([]);
  const [formIfo, setFormInfo] = useState("");
  const form = useRef();

  const UpdateService = async (e) => {
    e.preventDefault();
    const formdata = new FormData(form.current);
    const name = form.current.name.value;
    const price = form.current.price.value;
    const description = form.current.description.value;
    const image = form.current.image.value;
    setFormInfo({ name, price, description, image });

    try {
      setLoading(true);
      await updateServices(service.id, formdata);
      setOpenmodel(false);
      setLoading(false);
      loadServiceList();
      openSnackbar("Service successfully updated");
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <Helmet>
        <title>Service List</title>
        <meta name="description" content="Service List" />
        <meta name="theme-color" content="#008f68" />
      </Helmet>
      {waiting ? <LoadingSpinner /> : ""}
      <Grid container justifyContent="flex-end" item md={12}>
        <Tooltip title={"Add New Service"}>
          <ActionButton onClick={() => handleClickOpen()} variant="contained">
            <Button
              endIcon={<KeyboardArrowRightIcon className="adduserbtni" />}
              type="button"
              className="adduserbtn"
              variant="contained">
              Add Service
            </Button>
          </ActionButton>
        </Tooltip>
      </Grid>
      <table class="bill-data table">
        <thead className="addbillthead">
          <tr class="heading-tr p-1">
            <th width="100">
              <RiImageCircleFill style={{ fontSize: "1.5rem" }} />
            </th>
            <th>
              <span className="comspanserv">
                <BadgeOutlinedIcon /> Service Name
              </span>
            </th>
            <th>
              <span className="comspanserv">
                <TbFileDescription style={{ fontSize: "1.25rem" }} />
                Description
              </span>
            </th>
            <th>
              <span style={{ minWidth: 100 }} className="comspanserv">
                <IoPricetagsOutline style={{ fontSize: "1.25rem" }} /> Price
              </span>
            </th>
            <th>
              <span className="comspanserv">
                <IoSettingsOutline style={{ fontSize: "1.25rem" }} />
                Action
              </span>
            </th>
          </tr>
        </thead>
        <tbody id="billhistbody">
          {loading ? (
            <tr>
              <td colSpan="5" className="text-center">
                <LoadingSpinner />
              </td>
            </tr>
          ) : (
            serviceList.map((list, index) => (
              <Fragment>
                <tr className="text-center user spacer text-dark" key={index}>
                  <td className="text-center d-flex">
                    <Avatar alt="No Image" src={list.image} />
                  </td>
                  <td className="text-center servicename">{list.name}</td>
                  <td className="text-center servicedes" width="30%">
                    {list.description}
                  </td>
                  <td className="text-center servicepr">{list.price} </td>
                  <td className="text-center edit-action" id="tdactionbtn">
                    <Stack direction="row" spacing={2}>
                      <Tooltip title={"Edit Service"}>
                        <Button
                          onClick={() => handleShow(list)}
                          style={{ height: "30px", fontSize: "12px" }}
                          endIcon={
                            <CreateOutlinedIcon className="ediservice" />
                          }
                          type="button"
                          className="adduserbtn"
                          variant="contained">
                          Edit
                        </Button>
                      </Tooltip>
                      <Tooltip title={"Delete Service"}>
                        <Button
                          onClick={() => deleteList(list)}
                          style={{ height: "30px", fontSize: "12px" }}
                          endIcon={
                            <DeleteOutlinedIcon className="deldervice" />
                          }
                          type="button"
                          className="adduserbtn"
                          variant="contained">
                          Delete
                        </Button>
                      </Tooltip>
                    </Stack>
                  </td>
                </tr>
              </Fragment>
            ))
          )}
        </tbody>
      </table>
      {service !== null ? (
        <Fragment>
          <Modal
            show={openmodel}
            onHide={handleClose}
            backdrop="static"
            keyboard={false}>
            <Modal.Body>
              <div
                onClick={handleClose}
                className=""
                style={{ float: "right", padding: "10px" }}>
                <i class="fa-solid fa-xmark"></i>
              </div>
              <div className="container">
                <div className="row">
                  <div className="top_heading">
                    <div>
                      <h1>Update Service</h1>
                      <div className="boder-bottom mb-4"></div>
                    </div>
                  </div>
                  <form ref={form}>
                    <div className="row mb-4">
                      <div class="col-md-6">
                        <div class="md-form mb-0">
                          <div class="form__group field">
                            <input
                              type="input"
                              class="form__field"
                              placeholder="Name"
                              name="name"
                              id="name"
                            />
                            <label for="name" class="form__label">
                              Service Name
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="md-form mb-0">
                          <div class="form__group field">
                            <input
                              type="input"
                              class="form__field"
                              placeholder="Price"
                              name="price"
                              id="price"
                            />
                            <label for="price" class="form__label">
                              Price
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="row mb-4">
                      <div class="col-md-12">
                        <div class="md-form mb-0">
                          <div class="form__group field">
                            <textarea
                              type="input"
                              class="form__field"
                              placeholder="Description"
                              name="description"
                              id="description"
                              rows={5}
                            />
                            <label for="description" class="form__label">
                              Description
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="row">
                      <div class="col-md-12">
                        {selectedImage && (
                          <div className="overlay_hover">
                            <img
                              alt="not fount"
                              width={"200px"}
                              src={URL.createObjectURL(selectedImage)}
                            />
                            <br />
                            <div
                              className="Delete-image"
                              onClick={() => setSelectedImage(null)}>
                              <Delete className="delet-icon" />
                            </div>
                          </div>
                        )}
                        <br />
                        <input
                          type="file"
                          name="image"
                          onChange={(event) => {
                            console.log(event.target.files[0]);
                            setSelectedImage(event.target.files[0]);
                          }}
                        />
                      </div>
                    </div>
                    <div className="row">
                      <div class="col-md-12">
                        <div class="md-form mb-0">
                          <div class="form__group field">
                            <Button
                              id="adduser"
                              variant="contained"
                              onClick={UpdateService}
                              type="submit">
                              Update
                            </Button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </Modal.Body>
          </Modal>
        </Fragment>
      ) : (
        ""
      )}

      <Snackbar
        open={snackbarOpen}
        autoHideDuration={4000}
        onClose={closeSnackbar}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}>
        <MuiAlert
          elevation={6}
          variant="filled"
          onClose={closeSnackbar}
          severity="success">
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>

      <Dialog
        open={deleteConfirmationOpen}
        onClose={() => setDeleteConfirmationOpen(false)}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        className={classes.dialogCustomizedWidth}
        fullWidth={false}
        maxWidth={"md"}>
        {selectedList && (
          <>
            <DialogTitle id="alert-dialog-title">Confirm Deletion</DialogTitle>
            <DialogContent>
              <Typography variant="body1">
                Are you sure you want to delete the selected list?
              </Typography>
              {/* Optionally display the selected list details here */}
            </DialogContent>
            <DialogActions>
              <Button
                style={styl.cancel}
                onClick={() => setDeleteConfirmationOpen(false)}
                color="primary">
                Cancel
              </Button>
              <Button
                style={styl.error}
                variant="contained"
                onClick={() => {
                  deleteList(selectedList.id);
                  setDeleteConfirmationOpen(false);
                }}>
                Delete
              </Button>
            </DialogActions>
          </>
        )}
      </Dialog>

      <Dialog
        open={paymentshowmodel}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        className={classes.dialogCustomizedWidth}
        fullWidth={false}
        maxWidth={"md"}>
        {paymentshowmodel != "" && <ShowpaymentModel />}
        <DialogActions>
          <button
            onClick={handleUsersearchcloseModel}
            className="customtextdark">
            <i className="fa-solid fa-xmark"></i>
          </button>
        </DialogActions>
      </Dialog>

      <Dialog maxWidth="md" open={show}>
        <div id="dialer-form">
          <DialogTitle id="simple-dialog-title">
            <IconButton
              id="closebutton"
              justifyContent="flex-end"
              onClick={handleAddFormClose}>
              <CloseIcon />
            </IconButton>
          </DialogTitle>
          <div className="dialog-body" style={{ padding: "10px" }}>
            <Vishal setShow={setShow} onSubmit={onSubmit} />
          </div>
        </div>
      </Dialog>
    </div>
  );
}

ServiceList.propTypes = {
  intl: PropTypes.object.isRequired,
};

export default withStyles(styles)(injectIntl(ServiceList));