import React from "react";

const ServiceJobs = () => {
  return (
    <div className="col-xxl-4 col-lg-6">
      <div className="card h-100">
        <div className="card-header d-flex justify-content-between">
          <div className="card-title mb-0 text-start">
            <h5 className="mb-1">Service Jobs</h5>
            <p className="card-subtitle">All Projects</p>
          </div>
        </div>

        <div className="card-body p-0">
          <div className="nav-align-top">

            {/* Tabs */}
            <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
              <li className="nav-item">
                <button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
                  My Jobs
                </button>
              </li>
              <li className="nav-item">
                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
                  Assigned
                </button>
              </li>
              <li className="nav-item">
                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
                  In Progress
                </button>
              </li>
            </ul>

            {/* Tab Content */}
            <div className="tab-content border-0 mx-1 text-start">

              {/* ---------------------- NEW TAB ---------------------- */}
              <div className="tab-pane fade show active" id="tab-new">
                {/* Entry 1 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
                      <i className="bx bx-check-circle"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-success text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">Myrtle Ullrich</h6>
                      <p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
                    </div>
                  </li>
                  <li className="timeline-item ps-6 border-transparent">
                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
                      <i className="bx bx-map"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-primary text-uppercase">Receiver</small>
                      </div>
                      <h6 className="my-50">Barry Schowalter</h6>
                      <p className="text-body mb-0">939 Orange, California(CA), 92118</p>
                    </div>
                  </li>
                </ul>

                <div className="border-1 border-light border-top border-dashed my-4"></div>

                {/* Entry 2 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
                      <i className="bx bx-check-circle"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-success text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">Veronica Herman</h6>
                      <p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
                    </div>
                  </li>
                  <li className="timeline-item ps-6 border-transparent">
                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
                      <i className="bx bx-map"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-primary text-uppercase">Receiver</small>
                      </div>
                      <h6 className="my-50">Helen Jacobs</h6>
                      <p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
                    </div>
                  </li>
                </ul>
              </div>

              {/* ---------------------- PREPARING TAB ---------------------- */}
              <div className="tab-pane fade" id="tab-preparing">

                {/* Entry 1 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
                      <i className="bx bx-time-five"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-warning text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">Oliver Grant</h6>
                      <p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
                    </div>
                  </li>

                  <li className="timeline-item ps-6 border-transparent">
                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
                      <i className="bx bx-map"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-primary text-uppercase">Receiver</small>
                      </div>
                      <h6 className="my-50">Samantha Lee</h6>
                      <p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
                    </div>
                  </li>
                </ul>

                <div className="border-1 border-light border-top border-dashed my-4"></div>

                {/* Entry 2 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
                      <i className="bx bx-time-five"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-warning text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">Marcus Howard</h6>
                      <p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
                    </div>
                  </li>

                  <li className="timeline-item ps-6 border-transparent">
                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
                      <i className="bx bx-map"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-primary text-uppercase">Receiver</small>
                      </div>
                      <h6 className="my-50">Daniel Foster</h6>
                      <p className="text-body mb-0">312 Marina, California(CA), 94109</p>
                    </div>
                  </li>
                </ul>
              </div>

              {/* ---------------------- SHIPPING TAB ---------------------- */}
              <div className="tab-pane fade" id="tab-shipping">

                {/* Entry 1 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
                      <i className="bx bx-package"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-info text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">James Carter</h6>
                      <p className="text-body mb-0">441 Market St, California(CA), 94111</p>
                    </div>
                  </li>

                  <li className="timeline-item ps-6 border-transparent">
                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
                      <i className="bx bx-map"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-primary text-uppercase">Receiver</small>
                      </div>
                      <h6 className="my-50">Linda Moore</h6>
                      <p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
                    </div>
                  </li>
                </ul>

                <div className="border-1 border-light border-top border-dashed my-4"></div>

                {/* Entry 2 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
                      <i className="bx bx-package"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-info text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">Sarah Bennett</h6>
                      <p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
                    </div>
                  </li>

                  <li className="timeline-item ps-6 border-transparent">
                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
                      <i className="bx bx-map"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-primary text-uppercase">Receiver</small>
                      </div>
                      <h6 className="my-50">George Simmons</h6>
                      <p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
                    </div>
                  </li>
                </ul>
              </div>

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

      </div>
    </div>
  );
};

export default ServiceJobs;