import React from "react";
import Layout from "../components/layout/Layout";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import { useState } from "react";
import { Form } from "reactstrap";
function services() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <Layout
      headTitle="Services"
      pageTitle="Services"
      pageTitleSub={"Welcome User"}
      pageclassName={"Services"}
      parent={"Home"}
      child={"Services"}
    >
      <div className="row">
        <div className="col-xl-3 col-sm-6">
          <div className="stat-widget d-flex align-items-center bg-white">
            <div className="widget-icon me-3 bg-primary">
              <span>
                <i className="ri-file-copy-2-line"></i>
              </span>
            </div>
            <div className="widget-content">
              <h3>483</h3>
              <p>Total Requests</p>
            </div>
          </div>
        </div>
        <div className="col-xl-3 col-sm-6">
          <div className="stat-widget d-flex align-items-center bg-white">
            <div className="widget-icon me-3 bg-success">
              <span>
                <i className="ri-file-list-3-line"></i>
              </span>
            </div>
            <div className="widget-content">
              <h3>273</h3>
              <p>Completed Requests</p>
            </div>
          </div>
        </div>
        <div className="col-xl-3 col-sm-6">
          <div className="stat-widget d-flex align-items-center bg-white">
            <div className="widget-icon me-3 bg-warning">
              <span>
                <i className="ri-file-paper-line"></i>
              </span>
            </div>
            <div className="widget-content">
              <h3>121</h3>
              <p>Pending Requests</p>
            </div>
          </div>
        </div>
        <div className="col-xl-3 col-sm-6 mb-3">
          <div className="stat-widget d-flex align-items-center bg-white">
            <div className="widget-icon me-3 bg-danger">
              <span>
                <i className="ri-file-paper-2-line"></i>
              </span>
            </div>
            <div className="widget-content">
              <h3>89</h3>
              <p>Canceled Requests</p>
            </div>
          </div>
        </div>
        <div className="col-sm-12 d-block d-md-none bg-white mt-1">
           
        <div className="d-flex align-items-center justify-content-between py-2  bg-white">
                <div> <p className="fw-bold text-dark mb-0">Service Request</p></div>
                <div> <button className="btn-sm btn-primary"    onClick={handleShow}>+</button></div>
            </div>
            </div>
        <div className="col-sm-12 d-block d-md-none bg-white p-3 mb-2 mt-1">
           
          <div className="d-flex align-items-center justify-content-between">
            <div>
              <span>ABCD4556464QWE</span>
            </div>
            <div>
              <span className="badge px-3 py-2 bg-success"> Completed</span>
            </div>
          </div>
          <div className="d-flex align-items-center justify-content-between py-2">
            <div>
              <span>Water Leakage</span>
            </div>
            <div>
              <span>DT:23/5/23</span>
            </div>
          </div>
        </div>{" "}
        <div className="col-sm-12 d-block d-md-none bg-white p-3">
          <div className="d-flex align-items-center justify-content-between">
            <div>
              <span>ABCD4556464QWE</span>
            </div>
            <div>
              <span className="badge px-3 py-2 bg-warning"> Pending</span>
            </div>
          </div>
          <div className="d-flex align-items-center justify-content-between py-2">
            <div>
              <span>Water Leakage</span>
            </div>
            <div>
              <span>DT:25/5/23</span>
            </div>
          </div>
        </div>{" "}
        <div className="col-xl-12 d-none d-md-block">
          <div className="card">
            <div className="card-header flex-row">
              <h4 className="card-title">Services Request</h4>
              <Button
                variant="primary"
                onClick={handleShow}
                size="sm"
                className="p-1"
              >
                + New Request
              </Button>
            </div>
            <Modal show={show} onHide={handleClose}>
              <Modal.Header closeButton>
                <Modal.Title>New Service Request</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                <form className="row g-3 needs-validation" novalidate>
                  <div className="col-md-6">
                    <label for="validationCustom01" className="form-label">
                      Full Name
                    </label>
                    <input
                      type="text"
                      className="form-control"
                      id="validationCustom01"
                      value="Mathew"
                      required
                    />
                    <div className="valid-feedback">Looks good!</div>
                  </div>
                  <div className="col-md-6">
                    <label for="validationCustom01" className="form-label">
                      Mobile
                    </label>
                    <input
                      type="tel"
                      className="form-control"
                      id="validationCustom02"
                      value="123456"
                      required
                    />
                    <div className="valid-feedback">Looks good!</div>
                  </div>
                  <div className="col-md-6">
                    <label for="validationCustom04" className="form-label">
                      Service
                    </label>
                    <select
                      className="form-select"
                      id="validationCustom04"
                      required
                    >
                      <option>New Water Connection</option>
                      <option>Water Leakage</option>
                      <option>Water Shortage</option>
                    </select>
                    <div className="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                  <div className="col-md-6">
                    <label for="validationCustom03" className="form-label">
                      Building NO / Street
                    </label>
                    <input
                      type="text"
                      className="form-control"
                      id="validationCustom03"
                      value="5/35-1 ,River Rd, Fort Kochi"
                      required
                    />
                    <div className="invalid-feedback">
                      Please provide Building no / Street.
                    </div>
                  </div>
                  <div className="col-md-6">
                    <label for="validationCustom03" className="form-label">
                      City
                    </label>
                    <input
                      type="text"
                      className="form-control"
                      id="validationCustom03"
                      value="Kochi"
                      required
                    />
                    <div className="invalid-feedback">
                      Please provide a valid city.
                    </div>
                  </div>

                  <div className="col-md-6">
                    <label for="validationCustom05" className="form-label">
                      Zip
                    </label>
                    <input
                      type="text"
                      className="form-control"
                      id="validationCustom05"
                      value="682001"
                      required
                    />
                    <div className="invalid-feedback">
                      Please provide a valid zip.
                    </div>
                  </div>
                  <div className="col-md-6">
                  <div className="mb-3">
  <label for="formFileSm" className="form-label">Documents</label>
  <a type="file" className="border p-2 mx-2 text-dark text-uppercase"> Upload</a>
</div>
                  </div>
                  <div className="col-12">
                    <div className="form-check">
                      <input
                        className="form-check-input"
                        type="checkbox"
                        value=""
                        id="invalidCheck"
                        required
                      />
                      <label className="form-check-label" for="invalidCheck">
                        Agree to terms and conditions
                      </label>
                      <div className="invalid-feedback">
                        You must agree before submitting.
                      </div>
                    </div>
                  </div>
                </form>
              </Modal.Body>
              <Modal.Footer>
                <Button variant="primary" onClick={handleClose}>
                  Submit Request
                </Button>
              </Modal.Footer>
            </Modal>
            <div className="card-body">
              <div className="invoice-table">
                <div className="table-responsive">
                  <table className="table">
                    <thead>
                      <tr>
                        <th>
                          <div className="form-check">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              value=""
                              id="flexCheckDefault"
                            />
                          </div>
                        </th>
                        <th>Application No</th>
                        <th>Service</th>
                        <th>Name</th>
                        <th>Documents</th>
                        <th>Mobile</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <div className="form-check">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              value=""
                              id="flexCheckDefault"
                            />
                          </div>
                        </td>
                        <td>ABCD4556464QWE</td>
                        <td>New Water Connection</td>
                        <td>Jhon</td>
                        <td>File_090-1</td>
                        <td>5678909876</td>
                        <td>
                          <span className="badge px-3 py-2 bg-success">
                            {" "}
                            Completed
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div className="form-check">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              value=""
                              id="flexCheckDefault"
                            />
                          </div>
                        </td>

                        <td>ABMK846493CFE</td>
                        <td>New Sewerage Connection</td>
                        <td>Jhon</td>
                        <td>File_08982_-1</td>
                        <td>5678907865</td>
                        <td>
                          <span className="badge px-3 py-2 bg-danger  ">
                            Cancel
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div className="form-check">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              value=""
                              id="flexCheckDefault"
                            />
                          </div>
                        </td>

                        <td>ABGU745632CFE</td>
                        <td>Water Leak</td>
                        <td>Rajesh</td>
                        <td>File_08_88-1</td>
                        <td>5678903491</td>
                        <td>
                          <span className="badge px-3 py-2 bg-success">
                            Completed
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div className="form-check">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              value=""
                              id="flexCheckDefault"
                            />
                          </div>
                        </td>

                        <td>ABJK879125HNE</td>
                        <td>Water Shortage</td>
                        <td>Karan</td>
                        <td>File_070-1</td>
                        <td>5678905672</td>
                        <td>
                          <span className="badge px-3 py-2 bg-warning  ">
                            Pending
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div className="form-check">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              value=""
                              id="flexCheckDefault"
                            />
                          </div>
                        </td>

                        <td>ABTY876545JIE</td>
                        <td>New Water Connection</td>
                        <td>Rathod</td>
                        <td></td>
                        <td>5678901232</td>
                        <td>
                          <span className="badge px-3 py-2 bg-success">
                            Completed
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <div className="form-check">
                            <input
                              className="form-check-input"
                              type="checkbox"
                              value=""
                              id="flexCheckDefault"
                            />
                          </div>
                        </td>
                        <td>ABQW345678RTE</td>
                        <td>New Sewerage Connection</td>
                        <td>Smith</td>
                        <td></td>
                        <td>5678903456</td>
                        <td>
                          <span className="badge px-3 py-2 bg-warning  ">
                            Pending
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}

export default services;