import React from "react";
import CONFIG from "../../config.json";
export default function Dashboard() {
 return (
      <>
  <main>
    <section className="inner-page-section userdasboard">
      <div className="container">
        <div className="row">
          <div className="col-xl-12"><p className="logout">
            Hi, Kapil <a href="#" ><span>Log Out</span></a>
          </p></div>
        </div>
        <div className="row">
          <div className="col-xl-3 col-lg-4">
            <div className="ma-left-nav-wrap" id="filterBox">
                <div className="nav flex-column ma-left-nav" id="ma-pills-tab" role="tablist" aria-orientation="vertical">
                    <a className="nav-link active" id="ma-pills2-tab" data-toggle="pill" href="#ma-pills2" role="tab"
                       aria-controls="ma-pills2" aria-selected="false">
                       <i className="fas fa-file-invoice"></i>
                        <span>
                            My Bills
                        </span>
                    </a>
                    <a className="nav-link" id="ma-pills1-tab" data-toggle="pill" href="#ma-pills1" role="tab"
                    aria-controls="ma-pills1" aria-selected="true">
                    <i className="far fa-user"></i><span>
                         Profile Informations
                     </span>
                 </a>
                 <a className="nav-link" href="#"><i className="fas fa-sign-out-alt"></i> <span>Log Out</span></a>
                </div>
            </div>
        </div>
          <div className="col-xl-9 col-lg-8">
            <div className="tab-content" id="ma-pills-tabContent">
              <div className="tab-pane fade show active" id="ma-pills2" role="tabpanel" aria-labelledby="ma-pills2-tab">
                <div className="my-order-repeat">
                  <div className="my-order-id">
                    <div className="row">
                      <div className="col-xl-12">
                        <span>You have following bills.</span>
                      </div>
                    </div>
                  </div>
                  <div className="my-order-row">
                    <div className="row">
                      <div className="col-xl-12">
                        <div className="table-responsive">
                          <table className="table">
                            <thead>
                              <tr>
                                <th scope="col">Service name</th>
                                <th scope="col">Invoice Number</th>
                                <th scope="col">Billing Date</th>
                                <th scope="col">Status</th>
                                <th scope="col">Amount<h6>(with 3.5% of credit card charges)</h6></th>
                                <th scope="col">Pay Now</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>Fleet Management</td>
                                <td>CDLDL1901</td>
                                <td>13/10/2021</td>
                                <td>Pending</td>
                                <td>$ 147.44</td>
                                <td><button type="button" className="btn btn-primary btn-block btn-continue">Pay</button></td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>

                      <div className="col-lg-5 col-sm-5 ml-auto">
                        <table className="table table-clear">
                          <tbody>
                            <tr>
                              <td className="left border-none">
                                <strong>Credit Card Bank Charges</strong>
                              </td>
                              <td className="right border-none">3.5%</td>
                            </tr>
                            <tr>
                              <td className="left border-none">
                                <strong>Total</strong>
                              </td>
                              <td className="right border-none">
                                <strong>$ 147.44</strong>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                    </div>
                  </div>
                </div>

                <div className="my-order-repeat">
                  <div className="my-order-id">
                    <div className="row">
                      <div className="col-xl-12">
                        <span>You have following bills.</span>
                      </div>
                    </div>
                  </div>
                  <div className="my-order-row">
                    <div className="row">
                      <div className="col-xl-12">
                        <div className="table-responsive">
                          <table className="table">
                            <thead>
                              <tr>
                                <th scope="col">Service name</th>
                                <th scope="col">Invoice Number</th>
                                <th scope="col">Billing Date</th>
                                <th scope="col">Status</th>
                                <th scope="col">Amount<h6>(with 3.5% of credit card charges)</h6></th>
                                <th scope="col">Pay Now</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>Fleet Management</td>
                                <td>CDLDL1902</td>
                                <td>13/10/2021</td>
                                <td>Pending</td>
                                <td>₹ 5002.44</td>  
                                <td><a href=""><img src="/images/PayPal-Logo.jpg" alt=""/></a></td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>

                      <div className="col-lg-5 col-sm-5 ml-auto">
                        <table className="table table-clear">
                          <tbody>
                            <tr>
                              <td className="left border-none">
                                <strong>Credit Card Bank Charges</strong>
                              </td>
                              <td className="right border-none">3.5%</td>
                            </tr>
                            <tr>
                              <td className="left border-none">
                                <strong>Total</strong>
                              </td>
                              <td className="right border-none">
                                <strong>₹ 5002.44</strong>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                    </div>
                  </div>
                </div>

              </div>
              <div className="tab-pane fade" id="ma-pills1" role="tabpanel" aria-labelledby="ma-pills1-tab">
                <div className="personal-info-wrap">
           
                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">Full Name</span>
                      <a href="#" className="edit-link">Edit</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-xl-5 col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" disabled required/>
                          </div>
                        </div>
                        <div className="col-xl-5 col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" disabled/>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">Full Name</span>
                      <a href="#" className="edit-link">Cancel</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-md-5">
                          <div className="form-group">
                            <input type="text" className="form-control" placeholder="First Name" name="firstName" required
                              autoComplete="name" tabIndex="1"/>
                          </div>
                        </div>
                        <div className="col-md-5">
                          <div className="form-group">
                            <input type="text" className="form-control" placeholder="Last Name" name="lastName"
                              autoComplete="name"/>
                          </div>
                        </div>
                        <div className="col-md-2">
                          <div className="form-group">
                            <button type="button" className="btn btn-primary btn-block btn-continue">Save</button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">Email Address</span>
                      <a href="#" className="edit-link">Edit</a>
                      <a href="#" className="edit-link">Change Password</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" autoComplete="email" required disabled
                              placeholder="kapildev.varun@gmail.com"/>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">Email Address</span>
                      <a href="#" className="edit-link">Cancel</a>
                      <a href="#" className="edit-link">Change Password</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" autoComplete="email" required disabled
                              value="kapildev.varun@gmail.com"/>
                          </div>
                        </div>
                        <div className="col-md-2">
                          <div className="form-group">
                            <button type="button" className="btn btn-primary btn-block btn-continue">Save</button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">Email Address</span>
                      <a href="#" className="edit-link">Edit</a>
                      <a href="#" className="edit-link">Change Password</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-xl-6">
                          <div className="checkout-login-advntgs pl0 pass-musthave">
                            <p className="checkout-login-advntgs-title">Your new password must:</p>
                            <ul className="list-inline checkout-advntgs-list">
                              <li>Be at least 4 characters in length</li>
                              <li>Not be same as your current password</li>
                              <li>Not contain common passwords.</li>
                            </ul>
                          </div>
                        </div>
                        <div className="col-xl-6">
                          <div className="form-group">
                            <input type="text" className="form-control" placeholder="Type current password"
                              autoComplete="current-password" minLength="4" required/>
                          </div>
                          <div className="form-group">
                            <input type="text" className="form-control" placeholder="Type new password"
                              autoComplete="new-password" minLength="4" required/>
                          </div>
                          <div className="form-group">
                            <input type="text" className="form-control" placeholder="Retype new password" minLength="4"
                              required/>
                          </div>
                          <div className="form-group">
                            <input type="text" className="form-control" maxLength="4"
                              placeholder="Enter OTP sent to kapildev.varun@gmail.com" autoComplete="off" required/>
                          </div>
                          <div className="form-group">
                            <button type="button" className="btn btn-primary btn-block btn-continue">Change
                              Password</button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                   <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">Mobile Number</span>
                      <a href="#" className="edit-link">Edit</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" autoComplete="tel" required disabled
                              placeholder="8802640363"/>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">Mobile Number</span>
                      <a href="#" className="edit-link">Cancel</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" autoComplete="tel" required
                              placeholder="8802640363"/>
                          </div>
                        </div>
                        <div className="col-md-2">
                          <div className="form-group">
                            <button type="button" className="btn btn-primary btn-block btn-continue">Save</button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                  
                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">Country</span>
                      <a href="#" className="edit-link">Edit</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" autoComplete="tel" required disabled
                              placeholder="India"/>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">Country</span>
                      <a href="#" className="edit-link">Cancel</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" autoComplete="tel" required
                              placeholder="India"/>
                          </div>
                        </div>
                        <div className="col-md-2">
                          <div className="form-group">
                            <button type="button" className="btn btn-primary btn-block btn-continue">Save</button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

              
                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">City</span>
                      <a href="#" className="edit-link">Edit</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" autoComplete="tel" required disabled
                              placeholder="Delhi"/>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                  <div className="ma-row">
                    <div className="ma-row-title">
                      <span className="ex-title">City</span>
                      <a href="#" className="edit-link">Cancel</a>
                    </div>
                    <form>
                      <div className="row gutters-10">
                        <div className="col-md-6">
                          <div className="form-group">
                            <input type="text" className="form-control" autoComplete="tel" required
                              placeholder="Delhi"/>
                          </div>
                        </div>
                        <div className="col-md-2">
                          <div className="form-group">
                            <button type="button" className="btn btn-primary btn-block btn-continue">Save</button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>

                  <br/>
                  <a href="#" className="ma-deactivate-link"><span>-</span> Deactivate Account</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    </main>
</>
  );
}


