<admin-page-header [title]="'BusinessHours'"></admin-page-header>

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card">
    <form #BussHourTitle="ngForm" (ngSubmit)="BusinessHrTitle(BussHourTitle, 'businessHrtitle')">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Business Hours Title' | translate}}</h4>
        <div class="card-options card-header-styles position-relative">
          <small class="me-1 mt-1">{{'Show Section' | translate}}</small>
          <div class="float-end mt-0">
            <div class="switch-toggle">
              <span class="onoffswitch2">
                <input type="checkbox" ngModel value="yes" name="businesshoursswitch" id="businesshoursswitch"
                  class=" toggle-class onoffswitch2-checkbox"
                  [checked]="businessData?.businesshoursswitch === 'on' ? true : false"
                  [ngModel]="businessData?.businesshoursswitch === 'on'">
                <label for="businesshoursswitch" class="toggle-class onoffswitch2-label"></label>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="form-group">
          <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
          <input type="text" class="form-control" name="businesshourstitle"
            [ngModel]="businessData?.businesshourstitle">

        </div>
        <div class="form-group">
          <label class="form-label">{{'Subtitle' | translate}}</label>
          <input type="text" class="form-control" name="businesshourssubtitle"
            [ngModel]="businessData?.businesshourssubtitle">
        </div>
        <div class="form-group">
          <div class="col-xl-6 col-sm-12 col-lg-12 ps-0">
            <div class="spfileupload">
              <div class="row">
                <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8">
                  <div class="form-group">
                    <div>
                      <label class="form-label fs-16">{{'Upload Supporticon' | translate}}</label>
                      <div class="input-group file-browser">
                        <input #supportIcon class="form-control" name="supporticon" type="file" ngModel
                          (change)="image($event)">

                      </div>
                      <small class="text-muted"><i>{{'The file size should not be more than 500kb'
                          | translate}}</i></small>
                    </div>
                  </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">
                  <div class="file-image-1 ms-sm-auto sprukologoss">
                    <div class="product-image sprukologoimages">
                      @if (Src) {
                      <img src="{{Src}}" class="br-5" alt="support" loading="lazy" decoding="async">
                      }
                      @if (businessData?.supporticonimage) {
                      <button aria-label="close" (click)="businesslogodelete()" type="button"
                        class="btn ticketnotedelete border-white text-gray logosdelete">
                        <i class="feather feather-x"></i>
                      </button>
                      }
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


      </div>
      <div class="card-footer">
        <div class="form-group float-end">

          <button [disabled]="sendingResponse['businessHrtitle']" type="submit" class="btn btn-secondary">{{'Save Changes' |
            translate}}@if (sendingResponse['businessHrtitle']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
            }</button>
        </div>
      </div>
    </form>
  </div>
</div>


<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card">
    <form #businessofflinemsgFormData="ngForm"
      (ngSubmit)="businessofflinemsg(businessofflinemsgFormData, 'businessofflinemsg')">
      <div class="card-header border-0">
        <h4 class="card-title">{{'Show Offline Message' | translate}}</h4>
        <div class="card-options card-header-styles">
          <div class="float-end mt-0">
            <div class="switch-toggle">
              <a class="onoffswitch2"> <input type="checkbox" name="businesshourofflinemsg" id="businesshourofflinemsg"
                  class=" toggle-class onoffswitch2-checkbox" value="on"
                  [checked]="businessData?.setting?.businesshourofflinemsg == 'on' ? true : false"
                  [ngModel]="businessData?.setting?.businesshourofflinemsg == 'on' ? true : false">
                <label for="businesshourofflinemsg" class="toggle-class onoffswitch2-label"></label>
              </a>
            </div>
          </div>
        </div>
      </div>
      <small class="text-muted ps-5">( {{'If you enable this switch, the Offline Message will be displayed to customers when business hours are offline. This message wil appear to customers in create ticket page, ticket view page and dashboard' | translate}} )</small>
      <div class="card-body">
        <div class="form-group">
          <label class="form-label">{{'Title' | translate}} <span class="text-red">*</span></label>
          <input type="text" class="form-control" name="offlineTextTitle"
            [ngModel]="businessData?.setting?.offlineTextTitle">
        </div>
        <div class="form-group">
          <label class="form-label">{{'Message' | translate}} <span class="text-danger">*</span></label>
          <input type="text" class="form-control" name="offlineTextMessage"
            [ngModel]="businessData?.setting?.offlineTextMessage">
        </div>
      </div>
      <div class="card-footer">
        <div class="form-group float-end">
          <button type="submit" class="btn btn-secondary">{{'Save Changes' | translate }}</button>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="col-xl-12 col-lg-12 col-md-12">
  <div class="card ">
    <div class="card-header border-0">
      <h4 class="card-title">{{'Business Hours' | translate}}</h4>
      <div class="card-options card-header-styles position-relative">
        <small class="me-1 mt-1">24/7</small>
        <div class="float-end mt-0">
          <div class="switch-toggle">
            <span class="onoffswitch2">
              <input #businesshoursswitch type="checkbox" name="businesshoursswitch247" id="businesshoursswitch247"
                class="toggle-class onoffswitch2-checkbox" value="off"
                [checked]="businessData?.['24hoursbusinessswitch'] =='on' ? true : false"
                (change)="businesshoursswitch247(businesshoursswitch)">
              <label for="businesshoursswitch247" class="toggle-class onoffswitch2-label"></label>
            </span>
          </div>
        </div>
      </div>
    </div>
    <form #createBusinessHour="ngForm" (reset)="resetBusinessHours()"
      (ngSubmit)="BusinessHours(createBusinessHour, 'resetBus')">
      <div class="card-body">
        <div class="table-business-hours table-responsive">
          <table class="table card-table table-vcenter text-nowrap mb-0">
            <thead>
              <tr class="">
                <th scope="col" class="w-20 border-bottom-0 ">{{'Days' | translate}}</th>
                <th scope="col" class="w-20 border-bottom-0">{{'Closed/Opened' | translate}}</th>
                <th scope="col" class="w-20 border-bottom-0">{{'Start-time' | translate}}</th>
                <th scope="col" class="w-20 border-bottom-0">{{'End-time' | translate}}</th>
              </tr>
            </thead>
            <tbody>
              @for (business of businessData?.businesshour;let i = $index; track i) {
              <tr class="border-bottom-transparent">
                @if (i === 0) {
                <td class="">
                  <input type="hidden" name="businessid1" [value]="i+ 1" [ngModel]="i+ 1">
                  <ng-select #businesshourslist required class="form-control" [items]="weekdays"
                    [disabled]="businessData?.['24hoursbusinessswitch'] =='on' ? true : false" [loading]="!weekdays"
                    #select [placeholder]="'Select Day' | translate" [clearable]="false" [virtualScroll]="true"
                    bindLabel="value" (change)="daySort($event)" [searchable]="true" dropdownPosition="auto"
                    bindValue="value" name="business{{i + 1 }}" [ngModel]="businessData?.businesshour?.[i]?.weeks">
                    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                      <div><span>{{item?.value}}</span></div>
                    </ng-template>
                  </ng-select>
                </td>
                } @else {
                <td class="tr_weeks">
                  <input type="hidden" name="businessid{{i + 1 }}" [value]="i + 1" [ngModel]="i + 1">
                  <input type="text" #sprukoweeks readonly name="business{{i + 1}}" class="form-control"
                    [disabled]="businessData?.['24hoursbusinessswitch'] =='on' ? true : false"
                    [value]="businessData['businesshour'][i]?.['weeks']"
                    [ngModel]="businessData['businesshour'][i]?.['weeks']">
                </td>
                }
                <td class="">
                  <ng-select #businesshourslist required class="form-control select2 statusChange247 sprukoopen"
                    [disabled]="businessData?.['24hoursbusinessswitch'] =='on' ? true : false" [items]="status"
                    [loading]="!status" #select [placeholder]="'Select Status' | translate" [virtualScroll]="true"
                    bindLabel="value" [searchable]="true" dropdownPosition="auto" bindValue="value" name="status{{i+1}}"
                    [ngModel]="businessData?.businesshour?.[i]?.status"
                    (ngModelChange)="businessData?.businesshour?.[i] ? businessData?.businesshour?.[i]['status']=$event : null"
                    (change)="remove247()">
                    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                      <div><span>{{item?.value}}</span></div>
                    </ng-template>
                  </ng-select>
                </td>
                <td class="tr_clone1">
                  <ng-select #businesshourslist required class="form-control select2 statusChange247 sprukostarttime"
                    [items]="timestart" [loading]="!timestart" #select [placeholder]="'Select Start time' | translate"
                    [disabled]="businessData?.['24hoursbusinessswitch'] =='on' ? true : false || businessData?.businesshour?.[i]?.['status'] != 'Opened'"
                    [virtualScroll]="true" bindLabel="name" [searchable]="true" dropdownPosition="auto"
                    bindValue="value" name="starttime{{i+1}}" [ngModel]="businessData?.businesshour?.[i]?.starttime"
                    (ngModelChange)="businessData?.businesshour?.[i] ? businessData?.businesshour?.[i]['starttime']=$event : null"
                    (change)="remove247()">
                    <ng-option value="24H">
                      24H
                    </ng-option>
                    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">

                      <div><span>{{item?.name}}</span></div>
                    </ng-template>

                  </ng-select>
                </td>

                <td class="tr_clone">
                  <ng-select #businesshourslist required class="form-control select2 statusChange247 sprukoendtime"
                    [items]="timeend" [loading]="!timeend" #select [placeholder]="'Select End time' | translate"
                    [virtualScroll]="true"
                    [disabled]="businessData?.businesshour?.[i]?.['status'] != 'Opened' || businessData?.businesshour?.[i]?.['starttime'] == '24H'"
                    bindLabel="name" [searchable]="true" dropdownPosition="auto" bindValue="value" name="endtime{{i+1}}"
                    [ngModel]="businessData?.businesshour?.[i]?.['starttime'] == '24H' ? '' :businessData?.businesshour?.[i]?.endtime"
                    (change)="remove247()">
                    <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
                      <div><span>{{item?.name}}</span></div>
                    </ng-template>
                  </ng-select>
                </td>

              </tr>
              }
            </tbody>
          </table>

        </div>
      </div>
      <div class="card-footer">
        <div class="form-group float-end">
          <button type="reset" id="businesshourRest" class="btn btn-danger mx-2">{{'Reset' |
            translate}}</button>

          <button
            [disabled]="businessData?.['24hoursbusinessswitch'] =='on' ? true : false || createBusinessHour.invalid || sendingResponse['resetBus']"
            id="businesshourSubmit" type="submit" class="btn btn-primary">{{'Save' | translate}}@if
            (sendingResponse['resetBus']) {
            <i class="fa fa-spinner fa-spin mx-1"></i>
            }</button>
        </div>
      </div>
    </form>
  </div>
</div>