<!-- Business Hour -->
@if (setting?.businesshoursswitch == 'on') {
  <div class="card p-3 pricing-card border d-flex notify-days-toggle" (click)="toggleBusiness()">
    <div class="d-md-flex d-block">
      <div class="support-img1">
        @if (supporticonimageprev) {
          <img [src]="supporticonimageprev" class="rounded-circle" alt="img" width="50" height="50" loading="lazy" decoding="async">
        }
      </div>
      <div class="card-header text-justified flex-1 pt-0 ps-md-3 ps-0 pb-0 overflow-auto ">
        <p class="fs-18 font-weight-semibold mb-1">{{setting?.businesshourstitle | translate}}
          @if (isonline) {
            <span class="ms-1 badge bg-success text-white  mt-1 fs-12 font-weight-normal">{{'Online' | translate}}</span>
          } @else {
            <span class="ms-1 badge bg-danger text-white  mt-1 fs-12 font-weight-normal">{{'offline' | translate}}</span>
          }
        </p>
        <p class="fs-13 mb-0 text-muted">{{setting?.businesshourssubtitle | translate}}</p>
      </div>
      @if(toggleStatus){
        <div class="my-4 ms-auto">
          <span class="fe float-end notify-arrow" [ngClass]="isOpen ? 'fe-chevron-up' : 'fe-chevron-down'"></span>
        </div>
      }
    </div>
    <div class="card-body pt-0 pb-0 px-4 notify-days-container" [ngClass]="isOpen ? 'show-days' : ''">
      <app-business-hour-card-list [setting]="setting" [businesshours]="businesshours"></app-business-hour-card-list>
      <!-- <ul class="custom-ul text-justify pricing-body text-muted ps-0 mb-4">
        @for (business of businesshours; track business) {
          @if (business?.weeks != null) {
            <li class="mb-2">
              <div
                class="row br-5 notify-days-cal align-items-center p-2 border text-center {{(today | date : 'E' : timezone) == business?.weeks ? 'bg-success-transparent' : '' }}">
                <div class="col-xxl-3 col-xl-3 col-sm-12 ps-0">
                  @if (business?.weeks == 'Sun') {
                    <span class="badge p-1 bg-info-transparent fs-13 font-weight-normal text-nowrap w-100 ">{{business?.weeks | translate}}</span>
                  } @else {
                    <span class="badge p-1 fs-13 font-weight-normal text-nowrap w-100"
                    [ngClass]="(today | date : 'E' : timezone) == business?.weeks ? 'bg-success' : 'bg-info' ">{{business?.weeks | translate}}</span>
                  }
                </div>
                <div class="col-xxl-3 col-xl-4 col-sm-12">
                  @if ((today | date : 'E' : timezone) == business?.weeks) {
                    <span [ngClass]="business.status != 'Closed' ? 'text-success' : 'text-success'"
                    class="fs-12 ms-2 text-nowrap">{{'Today' | translate}}</span>
                  }
                </div>
                <div class="col-xxl-6 col-xl-5 col-sm-12 px-0">
                  @if (business?.status == 'Closed') {
                    <span class="text-danger fs-12 ms-2">{{business?.status | translate}}</span>
                  } 
                  @else {
                    @if(business?.starttime){
                      <span class="ms-0 fs-13">{{business?.starttime | timeconvertion}}
                        @if (business?.starttime !== null && business?.endtime != null) {
                            <span class="fs-10 mx-1">- </span>
                        }
                        </span>
                    }
                    @if (business?.starttime !== null && business?.endtime) {
                      <span class="ms-0">{{business?.endtime | timeconvertion}}</span>
                    }
                  }
                </div>
              </div>
            </li>
          }
        }
      </ul> -->
    </div>
  </div>
}
<!-- End Business Hour -->