admin/src/views/TerritoryManager/AddTerritoryManager.js

import React, { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { isAutheticated } from "src/auth";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import swal from "sweetalert";

const AddTerritoryManager = () => {
  const navigate = useNavigate();
  const token = isAutheticated();

  const [formData, setFormData] = useState({
    uniqueId: "",
    name: "",
    email: "",
    countryCode: "+91",
    mobileNumber: "",
    otp: "",
  });

  const [showModal, setShowModal] = useState(false);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };
  const validateForm = () => {
    const { uniqueId, name, email, mobileNumber } = formData;
    if (!uniqueId || !name || !email || !mobileNumber) {
      swal({
        title: "Warning",
        text: "All fields are required!",
        icon: "warning",
        button: "OK",
      });
      return false;
    }
    if (!/^\d{10}$/.test(mobileNumber)) {
      swal({
        title: "Warning",
        text: "Mobile number must be 10 digits!",
        icon: "warning",
        button: "OK",
      });
      return false;
    }
    return true;
  };
  const handleRegister = async (e) => {
    e.preventDefault();
    if (!validateForm()) return;
    try {
      await axios.post("https://cheminova-api1.onrender.com/api/territorymanager/register", formData, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      setShowModal(true); // Show OTP modal after registration
    } catch (error) {
      console.error(error);
      let msg =
        error?.response?.data?.message ||
        "Failed to register TerritoryManager. Please try again.";
      swal({
        title: "Warning",
        text: msg,
        icon: "error",
        button: "Retry",
        dangerMode: true,
      });
    }
  };

  const handleVerifyOTP = async () => {
    try {
      await axios.post("/api/territorymanager/verify-otp", {
        otp: formData.otp,
        fullMobileNumber: `${formData.countryCode}${formData.mobileNumber}`,
      });

      setShowModal(false); // Close OTP modal after verification
      swal({
        title: "Success",
        text: "OTP verified successfully!",
        icon: "success",
        button: "OK",
      }).then(() => {
        navigate("/territorymanagers"); // Navigate to success page or desired route
      });
    } catch (error) {
      console.error(error);
      let msg =
        error?.response?.data?.message ||
        "OTP verification failed. Please try again.";
      swal({
        title: "Warning",
        text: msg,
        icon: "error",
        button: "Retry",
        dangerMode: true,
      });
    }
  };

  // Function to handle cancel button click
  const handleCancel = () => {
    navigate("/territorymanagers"); // Navigate to '/territorymanagers'
  };

  return (
    <div className="main-content">
      <div className="my-3 page-content">
        <div className="container-fluid">
          <div className="row">
            <div className="col-12">
              <div className="page-title-box d-flex align-items-center justify-content-between">
                <h4 className="mb-3">Add Territory Manager</h4>
                <Button variant="danger" onClick={handleCancel}>
                  Cancel
                </Button>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-12">
              <div className="card">
                <div className="card-body">
                  <form onSubmit={handleRegister}>
                    <div className="form-group">
                      <label>Employee Code *</label>
                      <input
                        type="text"
                        name="uniqueId"
                        className="form-control"
                        value={formData.uniqueId}
                        onChange={handleChange}
                        required
                      />
                    </div>
                    <div className="form-group">
                      <label>Name *</label>
                      <input
                        type="text"
                        name="name"
                        className="form-control"
                        value={formData.name}
                        onChange={handleChange}
                        required
                      />
                    </div>
                    <div className="form-group">
                      <label>Email *</label>
                      <input
                        type="email"
                        name="email"
                        className="form-control"
                        value={formData.email}
                        onChange={handleChange}
                        required
                      />
                    </div>
                    <div className="form-group d-flex">
                      <div className="mr-2" style={{ flex: 1 }}>
                        <label>Country Code *</label>
                        <input
                          type="text"
                          name="countryCode"
                          className="form-control"
                          value={formData.countryCode}
                          onChange={handleChange}
                          required
                          disabled
                        />
                      </div>
                      <div style={{ flex: 3 }}>
                        <label>Mobile Number *</label>
                        <input
                          type="text"
                          name="mobileNumber"
                          className="form-control"
                          value={formData.mobileNumber}
                          onChange={handleChange}
                          required
                        />
                      </div>
                    </div>
                    <button type="submit" className="btn btn-primary">
                      Register
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* OTP Modal */}
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Verify OTP</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form.Group controlId="otp">
            <Form.Label>Enter OTP</Form.Label>
            <Form.Control
              type="text"
              placeholder="Enter OTP"
              value={formData.otp}
              onChange={(e) =>
                setFormData({ ...formData, otp: e.target.value })
              }
              required
            />
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShowModal(false)}>
            Close
          </Button>
          <Button variant="primary" onClick={handleVerifyOTP}>
            Verify OTP
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
};

export default AddTerritoryManager;