import { useNavigate } from "react-router-dom";
import { Footer } from "../../../layouts/footer";
import ResponsiveAppBar from "../../../layouts/navbar";
import { ProductTypes } from "../landingPage/components/productTypes";
import { MyCart } from "../../private/chekout/components/myCart";

export const CustomOrderApproved = () => {
  const navigate = useNavigate();
  return (
    <>
      <ResponsiveAppBar />
      <ProductTypes />
      <div
        className="tf-breadcrumb"
        style={{
          fontFamily: "Albert Sans, sans-serif",
          fontSize: "14px",
          lineHeight: "22px",
          fontWeight: "400",
        }}
      >
        <div className="container">
          <div className="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
            <div className="tf-breadcrumb-list">
              <a className="text" onClick={() => navigate("/")}>
                Home
              </a>
              <i className="icon icon-arrow-right"></i>
              <span className="text">My Order Checkout</span>
            </div>
          </div>
        </div>
      </div>
      <section className="flat-spacing-11">
        <div
          className="container"
          style={{
            fontFamily: "Albert Sans, sans-serif",
            fontSize: "14px",
            lineHeight: "22px",
            fontWeight: "400",
          }}
        >
          <div className="row">
            <div className="col-md-8">
              <div className="mb-3 confirm-order">
                <div className="row align-items-center justify-content-center ">
                  <div className="col-12 text-center">
                    <img src="/images/success.svg" width="50" alt="" />
                    <h6 className="my-2 fw-6">
                      Your Custom Cake Request is Approved !
                    </h6>
                    <p>
                      <b className="address-text">
                        Please review the bill details and make the payment to
                        confirm your order.
                      </b>
                    </p>
                  </div>
                </div>
              </div>

              <div className="wd-form-order">
                <div className="tf-grid-layout md-col-12 gap-15 border-dotted">
                  <div className="item">
                    <div className="d-flex justify-content-between">
                      <div className="ms-2">
                        <b>REQUID979NJKG839</b>
                      </div>
                      <div className="ms-2">19th Nov 24 - 03:35pm</div>
                    </div>
                  </div>
                </div>
                <div className="tf-grid-layout md-col-12 gap-15 border-dotted">
                  <div className="item">
                    <div
                      className="row"
                      style={{ paddingLeft: "15px", paddingRight: "15px" }}
                    >
                      <div className="col-12 mt-3 px-1">
                        <p>Message on Cake</p>
                        <textarea
                          placeholder="Message"
                          readOnly
                          name="message"
                          className="enq"
                          id="message"
                          required
                          //   cols="30"
                          //   rows="10"
                        >
                          Celebrating uniqueness and Value!
                        </textarea>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="widget-content-inner mt-3 border-dotted">
                  <div className="text-2 fw-6">Order Status</div>
                  <div className="widget-timeline">
                    <ul className="timeline">
                      <li>
                        <div className="timeline-badge success"></div>
                        <div className="timeline-box">
                          <a
                            className="timeline-panel"
                            href="javascript:void(0);"
                          >
                            <div className="text-2 fw-6">Inquiry Submitted</div>
                          </a>
                        </div>
                      </li>
                      <li>
                        <div className="timeline-badge success"></div>
                        <div className="timeline-box">
                          <a
                            className="timeline-panel"
                            href="javascript:void(0);"
                          >
                            <div className="text-2 fw-6">Admin Review</div>
                          </a>
                        </div>
                      </li>
                      <li>
                        <div className="timeline-badge"></div>
                        <div className="timeline-box">
                          <a
                            className="timeline-panel"
                            href="javascript:void(0);"
                          >
                            <div className="text-21 fw-6">View and Pay</div>
                          </a>
                        </div>
                      </li>
                      <li>
                        <div className="timeline-badge"></div>
                        <div className="timeline-box">
                          <a
                            className="timeline-panel"
                            href="javascript:void(0);"
                          >
                            <div className="text-21 fw-6">
                              Order Confirmation
                            </div>
                          </a>
                        </div>
                      </li>
                      <li>
                        <div className="timeline-badge"></div>
                        <div className="timeline-box">
                          <a
                            className="timeline-panel"
                            href="javascript:void(0);"
                          >
                            <div className="text-21 fw-6">
                              Order will be ready for Delivery
                            </div>
                          </a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>

                <div className="tf-grid-layout md-col-12 mt-3 gap-15">
                  <div className="item">
                    <div className="d-flex">
                      <div className="ms-2">
                        <div className="text-2 fw-6">Steps</div>
                        <div>
                          Request Submitted{" "}
                          <i className="fa fa-arrow-right"></i> Pending Approval{" "}
                          <i className="fa fa-arrow-right"></i> Approved{" "}
                          <i className="fa fa-arrow-right"></i> Payment Pending{" "}
                          <i className="fa fa-arrow-right"></i> In Progress{" "}
                          <i className="fa fa-arrow-right"></i> Ready to Pickup
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="col-md-4 modal-shopping-cart pe-5 ps-0 ">
              <div className="wrap">
                <div className="tf-mini-cart-wrap card pt-4">
                  <div className="tf-mini-cart-main">
                    <h5 className="px-4 ms-2 fs-20 fw-6">
                      Item List{" "}
                      <span className="fs-14 text-orange">(04 Items)</span>
                    </h5>
                    <div className="tf-mini-cart-sroll">
                      <div className="tf-mini-cart-items">
                        <div
                          className="tf-mini-cart-item"
                          style={{ margin: "0 15px" }}
                        >
                          <div className="tf-mini-cart-image">
                            <a href="#">
                              <img src="/images/product03.png" alt="" />
                            </a>
                          </div>
                          <div className="tf-mini-cart-info">
                            <a className="title link" href="#">
                              Puffs Meat
                            </a>
                            <div className="price fw-6">₹25.00</div>
                            <div className="tf-mini-cart-btns">
                              <div className="wg-quantity small">
                                <span className="btn-quantity minus-btn">
                                  -
                                </span>
                                <input type="text" name="number" value="1" />
                                <span className="btn-quantity plus-btn">+</span>
                              </div>
                              <div className="tf-mini-cart-remove">Remove</div>
                            </div>
                          </div>
                        </div>
                        <div
                          className="tf-mini-cart-item"
                          style={{ margin: "0 15px" }}
                        >
                          <div className="tf-mini-cart-image">
                            <a href="#">
                              <img src="/images/product05.png" alt="" />
                            </a>
                          </div>
                          <div className="tf-mini-cart-info">
                            <a className="title link" href="#">
                              Banana Chips
                            </a>
                            <div className="price fw-6">₹105.00</div>
                            <div className="tf-mini-cart-btns">
                              <div className="wg-quantity small">
                                <span className="btn-quantity minus-btn">
                                  -
                                </span>
                                <input type="text" name="number" value="1" />
                                <span className="btn-quantity plus-btn">+</span>
                              </div>
                              <div className="tf-mini-cart-remove">Remove</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="tf-mini-cart-bottom">
                    <div className="tf-mini-cart-bottom-wrap">
                      <hr />
                      <div
                        className="tf-cart-totals-discounts"
                        style={{ margin: "0 15px" }}
                      >
                        <div className="tf-cart-total">Item Total</div>
                        <div className="tf-totals-total-value fw-6">
                          ₹400.99{" "}
                        </div>
                      </div>
                      <hr />
                      <div
                        className="tf-cart-totals-discounts"
                        style={{ margin: "0 15px" }}
                      >
                        <div>Add more Item</div>
                        <div>
                          <a href="#" className="orange-txt">
                            <i className="fa fa-plus"></i>
                          </a>
                        </div>
                      </div>
                      <div
                        className="tf-mini-cart-view-checkout"
                        style={{ margin: "20px 15px" }}
                      >
                        <a
                          href="checkout.html"
                          className="tf-btn btn-fill animate-hover-btn radius-3 w-100 justify-content-center"
                        >
                          <span>Continue Check out</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
};