<ul class="nav nav-tabs mt-4">
      <li class="nav-item">
        <a class="nav-link fontEn_bold font-grey" 
        [class.active]="activeTab === 'tab1'"
        (click)="selectTab('tab1',tab1)">Overview</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fontEn_bold font-grey" 
        [class.active]="activeTab === 'tab2'"
        (click)="selectTab('tab2',tab2)">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fontEn_bold font-grey" 
        [class.active]="activeTab === 'tab3'"
        (click)="selectTab('tab3',tab3)">Payments</a>
      </li>
      
    </ul>
    <div class="row">
      <div class="col-md-8 col-sm-12">
        <div class="tab-content">
          <div #tab1 class="section mt-3">
            <div class="row">
              <p class=" fontEn_bold font-red">Order Information</p>
              </div>

            <div class="row ">
              <p class="col-lg-6 col-md-6 col-6 mb-0 fontEn_bold">Order Id </p>
              <p class="col-lg-6 col-md-6 col-6 mb-0 fontEn_bold">Status</p>
            </div>
            <div class="row ">
              <p class="col-lg-6 col-md-6 col-6 fontEn_bold font-grey">{{selectedOrder.externalOrderId}} </p>
              <p class="col-lg-6 col-md-6 col-6 fontEn_regular badge rounded-pill {{selectedOrder.status}}">{{selectedOrder.status}}</p>
            </div>
            <div class="row ">
              <p class="col-lg-6 col-md-6 col-6 mb-0 fontEn_bold">Channel</p>
              <p class="col-lg-6 col-md-6 col-6 mb-0 fontEn_bold">Language</p>
            </div>
            <div class="row ">
              <p class="col-lg-6 col-md-6 col-6 fontEn_regular font-grey">{{selectedOrder.channel.name}}</p>
              <p class="col-lg-6 col-md-6 col-6 fontEn_regular font-grey">en</p>
            </div>
            <div class="row ">
              <p class="col-lg-6 col-md-6 col-6 mb-0 fontEn_bold">External Date</p>
              <p class="col-lg-6 col-md-6 col-6 mb-0 fontEn_bold">Updated at</p>
            </div>
            <div class="row ">
              <p class="col-lg-6 col-md-6 col-6 fontEn_regular font-grey">{{selectedOrder.externalOrderDate}}</p>
              <p class="col-lg-6 col-md-6 col-6 fontEn_regular font-grey">{{selectedOrder.updated_at}}</p>
            </div>

           <hr/>
            <div class="row">
              <p class=" fontEn_bold font-red">Shipment Details</p>
              </div>
              <div class="row ">
                <p class="col-lg-6 col-md-6 col-6 mb-0 fontEn_bold">Requested Delivery Date</p>
                <p class="col-lg-6 col-md-6 col-6 mb-0 fontEn_bold">Requested Delivery Time</p>
              </div>
              <div class="row ">
                <p class="col-lg-6 col-md-6 col-6 fontEn_regular font-grey">{{selectedOrder.requestedDeliveryDate}}</p>
                <p class="col-lg-6 col-md-6 col-6 fontEn_regular font-grey">{{selectedOrder.requestedDeliveryTime}}</p>
              </div>
            <div class="row ">
              <p class="col-lg-3 col-md-3 col-6 mb-0 fontEn_bold">Total</p>
              <p class="col-lg-3 col-md-3 col-6 mb-0 fontEn_bold">Total Shipment</p>
              <p class="col-lg-3 col-md-3 col-6 mb-0 fontEn_bold">Tax</p>
            </div>
            <div class="row ">
              <p class="col-lg-3 col-md-3 col-6 fontEn_regular font-grey"><span class="font-red fontEn_bold">{{selectedOrder.total}}</span>&nbsp;EGP</p>
              <p class="col-lg-3 col-md-3 col-6  fontEn_regular font-grey"><span class="font-red fontEn_bold">{{selectedOrder.totalShipment}}</span>&nbsp;EGP</p>
              <p class="col-lg-3 col-md-3 col-6 fontEn_regular font-grey"><span class="font-red fontEn_bold">{{selectedOrder.tax}}</span>&nbsp;EGP</p>
            </div>
            <p class="fontEn_bold mb-1">Comment</p>
              <textarea class="form-control" readonly>{{selectedOrder.note}}</textarea>
            <hr/>
            <div class="row">
              <p class=" fontEn_bold font-red">Payment</p>
              </div>
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Payment Method</th>
                    <th>Payment Date</th>
                    <th>Total</th>
                    <th>Tax</th>
                    <th>Currency</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let payment of selectedOrder.payment">
                    <td>{{payment.paymentMethod}}</td>
                    <td>{{payment.paymentDate}}</td>
                    <td>{{payment.total}}</td>
                    <td>{{payment.tax}}</td>
                    <td>{{payment.currency}}</td>
                    <td>{{payment.status}}</td>
                  </tr>
              
                </tbody>
              </table>
          </div>
          <div #tab2 class="section mt-3">
            <h3>Content for Tab 2</h3>
            <p>This is the content for tab 2.</p>
            <h3>Content for Tab 2</h3>
            <p>This is the content for tab 2.</p>
            <h3>Content for Tab 2</h3>
            <p>This is the content for tab 2.</p>
          </div>
          <div #tab3 class="section mt-3">
            <h3>Content for Tab 3</h3>
            <p>This is the content for tab 3.</p>
            <h3>Content for Tab 3</h3>
            <p>This is the content for tab 3.</p>
            <h3>Content for Tab 3</h3>
            <p>This is the content for tab 3.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-12">
        <div class="section mt-3">
        <div >A Basic Panel</div> 
      </div> 
      </div>
    </div> i want when click on overview go first content and so on