text: import React from "react";
  //Bootstrap and jQuery libraries
  import "bootstrap/dist/css/bootstrap.min.css";
  import "jquery/dist/jquery.min.js";
  import $ from "jquery";
  import { Link } from "react-router-dom";
  import baseurl from "../../../services/apiconfig";
  import imageurl from "../../../services/uploadconfig";
  import { ToastContainer, toast } from "react-toastify";
  import "react-toastify/dist/ReactToastify.css";
  import { getToken } from "../../../utils/Auth/token";
  import jwt_decode from "jwt-decode";
  const axios = require("axios");
  const isAuthenticated = getToken();
  var user = jwt_decode(isAuthenticated);
  class EditPopup extends React.Component {
    componentDidMount() {
      //Getting ID From URL
      var url = window.location.pathname;
      var id = url.substring(url.lastIndexOf("/") + 1);
  
      //For PopUp By ID
      axios
        .get(baseurl.baseurl + `/popup/getpopupbyid?id=${id}`)
        .then((res) => {
          console.log("res", res);
          this.setState({
            id: res.data.data.id,
            popup_name: res.data.data.popup_name,
            title: res.data.data.title,
            promotion_image: res.data.data.promotion_image,
            redirect_url: res.data.data.redirect_url,
            promotion_url: res.data.data.promotion_url,
            close_time: res.data.data.close_time,
            popup_height: res.data.data.popup_height,
            popup_width: res.data.data.popup_width,
            additional_info: res.data.data.additional_info,
          });
        })
        .catch((err) => {
          toast.error("Error occurred at API end (" + err.message + ")");
        });
    }
    constructor() {
      super();
      this.state = {};
    }
  
    handleChange(evt) {
      this.setState({
        [evt.target.name]: evt.target.value,
      });
    }
    showImageField() {
      $("#promotion_image").slideToggle("slow");
      $("#counsellor_btn").slideToggle("hide");
      $("#imgs-hidden").slideToggle("hide");
    }
    handlePopupUpload(evt) {
      const fileInput = document.querySelector("#promotion_image");
      const formData = new FormData();
      formData.append("file", fileInput.files[0]);
      var config = {
        method: "post",
        url: baseurl.baseurl + "/fileUpload/upload?module_name=popup",
        data: formData,
      };
      axios(config)
        .then((response) => {
          var response = response.data;
          this.setState({
            promotionImage: response.fileName,
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    }
    updatePopUp(evt, id) {
      evt.preventDefault();
  
      const postData = {
        id: this.state.id,
        popup_name: this.state.popup_name,
        title: this.state.title,
        promotion_image: this.state.promotionImage
          ? "/popup/" + this.state.promotionImage
          : this.state.promotion_image,
        redirect_url: this.state.redirect_url,
        promotion_url: this.state.promotion_url,
        close_time: this.state.close_time,
        popup_height: this.state.popup_height,
        popup_width: this.state.popup_width,
        additional_info: this.state.additional_info,
        updated_by: user?.id,
      };
      axios
        .put(baseurl.baseurl + `/popup/update/${id}`, postData)
        .then((res) => {
          console.log("res", res);
          toast.success(res.data.message);
          window.location.href = "/content-management";
        })
        .catch((err) => {
          toast.error("Error occurred at API end (" + err.message + ")");
        });
    }
    render() {
      return (
        <div>
          <section className="breadcrumbs">
            <span>
              <Link className="crumbs" to={"/dashboard"}>
                Home
              </Link>
            </span>{" "}
            <span>
              <span className="fa fa-circle dot"></span>
            </span>{" "}
            <Link className="crumbs" to={"/content-management"}>
              Content Management
            </Link>{" "}
            <span>
              <span className="fa fa-circle dot"></span>
            </span>{" "}
            <span>Edit Popup</span>
          </section>
          <section className="content" style={{ backgroundColor: "#fff" }}>
            <ToastContainer />
            <div className="row">
              <div className="col-md-12">
                <div className="box box-primary">
                  <div className="box-header">
                    <h3 className="box-title">Edit Popup</h3>
                  </div>
                  <hr />
                  <form>
                    <div className="box-body row">
                      <div className="col-lg-6 col-sm-6 col-xs-12">
                        <div className="form-group">
                          <label>PopUp Name</label>
                          <input
                            type="text"
                            name="popup_name"
                            onChange={(evt) => this.handleChange(evt)}
                            defaultValue={this.state.popup_name}
                            placeholder="Enter name"
                            className="form-control"
                          />
                        </div>
                      </div>
                      <div className="col-lg-6 col-sm-6 col-xs-12">
                        <div className="form-group">
                          <label for="addressTextarea">Title</label>
                          <input
                            type="text"
                            name="title"
                            onChange={(evt) => this.handleChange(evt)}
                            defaultValue={this.state.title}
                            placeholder="Enter title"
                            className="form-control"
                          />
                        </div>
                      </div>
                      <div className="col-lg-12 col-sm-6 col-xs-12">
                        <div className="form-group">
                          <label>Promotion Banner</label>
                          <input
                            type="file"
                            name="file"
                            accept="image/png, image/jpg, image/jpeg"
                            className="form-control"
                            id="promotion_image"
                            style={{ display: "none" }}
                            onChange={(evt) => this.handlePopupUpload(evt)}
                            defaultValue={this.state.file}
                          />
                          <input
                            className="form-control"
                            style={{ display: "none" }}
                            id="uploadedFileName"
                            name="promotionImage"
                            onChange={(evt) => this.handleChange(evt)}
                            defaultValue={this.state.promotionImage}
                          />
                          <div className="img">
                            <img
                              className="profile-img"
                              id="imgs-hidden"
                              src={imageurl.imageurl + this.state.promotion_image}
                            />{" "}
                            <span
                              id="counsellor_btn"
                              style={{
                                cursor: "pointer",
                                fontWeight: "bold",
                              }}
                              onClick={(evt) => this.showImageField(evt)}
                            >
                              <a className="btn btn-info update_btn">
                                Update Image
                              </a>
                            </span>
                          </div>
                        </div>
                      </div>
                      <div className="col-lg-6 col-sm-6 col-xs-12">
                        <div className="form-group">
                          <label for="addressTextarea">Redirect Url</label>
                          <input
                            type="text"
                            name="redirect_url"
                            onChange={(evt) => this.handleChange(evt)}
                            defaultValue={this.state.redirect_url}
                            placeholder="Enter redirect url"
                            className="form-control"
                          />
                        </div>
                      </div>
                      <div className="col-lg-6 col-sm-6 col-xs-12">
                        <div className="form-group">
                          <label for="addressTextarea">Promotion Url</label>
                          <input
                            type="text"
                            name="promotion_url"
                            onChange={(evt) => this.handleChange(evt)}
                            defaultValue={this.state.promotion_url}
                            placeholder="Enter promotion url"
                            className="form-control"
                          />
                        </div>
                      </div>
                      <div className="col-lg-6 col-sm-6 col-xs-12">
                        <div className="form-group">
                          <label for="addressTextarea">Close Time</label>
                          <input
                            type="time"
                            name="close_time"
                            onChange={(evt) => this.handleChange(evt)}
                            defaultValue={this.state.close_time}
                            className="form-control"
                          />
                        </div>
                      </div>
                      <div className="col-lg-6 col-sm-6 col-xs-12">
                        <div className="form-group">
                          <label for="addressTextarea">Popup Height</label>
                          <input
                            type="text"
                            name="popup_height"
                            onChange={(evt) => this.handleChange(evt)}
                            defaultValue={this.state.popup_height}
                            placeholder="Enter popup_height"
                            className="form-control"
                          />
                        </div>
                      </div>
                      <div className="col-lg-6 col-sm-6 col-xs-12">
                        <div className="form-group">
                          <label for="addressTextarea">Popup Width</label>
                          <input
                            type="text"
                            name="popup_width"
                            onChange={(evt) => this.handleChange(evt)}
                            defaultValue={this.state.popup_width}
                            placeholder="Enter popup width"
                            className="form-control"
                          />
                        </div>
                      </div>
                      <div className="col-lg-12 col-sm-12 col-xs-12">
                        <div className="form-group">
                          <b for="addressTextarea">Additional Field</b>
                          <textarea
                            id="addressTextarea"
                            className="form-control"
                            rows="3"
                            name="additional_info"
                            onChange={(evt) => this.handleChange(evt)}
                            defaultValue={this.state.additional_info}
                            placeholder="Enter text"
                          ></textarea>
                        </div>
                      </div>
  
                      <div className="col-lg-12 col-sm-12 col-xs-12">
                        <div className="form-group">
                          <center>
                            <input
                              className="btn btn-warning"
                              type="submit"
                              value="Update"
                              onClick={(evt) =>
                                this.updatePopUp(evt, this.state.id)
                              }
                            />
                          </center>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </section>
        </div>
      );
    }
  }
  export default EditPopup;
  