<div class="app-content content" >
  <div class="content-wrapper">
    <div class="content-header row mb-1">
      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
    </div>
    <div class="row">
      <div class="col-12 mt-3 mb-1">
        <h4 class="text-uppercase">Date Picker</h4>
      </div>
    </div>
    <section id="datePicker">
      <div class="row" matchHeight="card">
        <div class="col-lg-12 col-xl-6" *blockUI="'simpleDatepicker'; message: 'Loading'">
          <m-card [options]="options" (reloadFunction)="reloadSimpleDatepicker($event)">
            <ng-container mCardHeaderTitle>
              Simple datepicker
            </ng-container>
            <ng-container mCardBody>
              <ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

              <div class="block mt-1 mb-3">
                <button class="btn btn-sm btn-outline-primary mr-1" (click)="dp.navigateTo({year: 2013, month: 2})">To
                  Feb 2013</button>
                <button class="btn btn-sm btn-outline-primary mr-1" (click)="dp.navigateTo()">To current
                  month</button>
                <button class="btn btn-sm btn-outline-primary mr-1" (click)="selectToday()">Select Today</button>
              </div>

              <p>Month: {{ date.month }}.{{ date.year }}</p>
              <p>Model: {{ model | json }}</p>
            </ng-container>
          </m-card>
        </div>
        <div class="col-lg-12 col-xl-6" *blockUI="'disableDatepicker'; message: 'Loading'">
          <m-card [options]="options" (reloadFunction)="reloadDisableDatepicker($event)">
            <ng-container mCardHeaderTitle>
              Disabled datepicker
            </ng-container>
            <ng-container mCardBody>
              <ngb-datepicker [(ngModel)]="disabledModel" [disabled]="disabled"></ngb-datepicker>

              <div class="mt-1">
                <button class="btn btn-sm btn-outline-{{disabled ? 'danger' : 'success'}}"
                  (click)="disabled = !disabled">
                  {{ disabled ? "disabled" : "enabled"}}
                </button>
              </div>
            </ng-container>
          </m-card>
        </div>
      </div>
      <div class="row" matchHeight="card">
        <div class="col-lg-12 col-xl-6">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Datepicker in a popup</h4>
            </div>
            <div class="card-content">
              <div class="card-body">
                <form class="form-inline">
                  <div class="form-group">
                    <div class="input-group">
                      <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="popupModel"
                        ngbDatepicker #d2="ngbDatepicker">
                      <div class="input-group-append">
                        <div class="input-group-text" (click)="d2.toggle()">
                          <i class="fa fa-calendar" style="cursor: pointer;"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
                <p class="mt-4">Model: {{ popupModel | json }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-12 col-xl-6">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Custom day view</h4>
            </div>
            <div class="card-content">
              <div class="card-body">
                <p>This datepicker uses a custom template to display days. All week-ends are displayed with an orange
                  background.</p>
                <form class="form-inline">
                  <div class="form-group">
                    <div class="input-group">
                      <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker
                        [dayTemplate]="customDay" [markDisabled]="isDisabled" #d3="ngbDatepicker">
                      <div class="input-group-append">
                        <div class="input-group-text" (click)="d3.toggle()">
                          <i class="fa fa-calendar" style="cursor: pointer;"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>

                <ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected"
                  let-disabled="disabled" let-focused="focused">
                  <span class="custom-day" [class.weekend]="isWeekend(date)"
                    [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
                    {{ date.day }}
                  </span>
                </ng-template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" matchHeight="card">
        <div class="col-lg-12 col-xl-6">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Multiple months</h4>
            </div>
             <div class="card-content">
              <div class="card-body" fxFlex="auto" [perfectScrollbar]="config">
                <ngb-datepicker [displayMonths]="displayMonths" [navigation]="navigation"></ngb-datepicker>

                <p class="pt-1">Inline</p>

                <form class="form-inline">
                  <div class="form-group">
                    <div class="input-group">
                      <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [displayMonths]="displayMonths"
                        [navigation]="navigation" ngbDatepicker #d="ngbDatepicker">
                      <div class="input-group-append">
                        <div class="input-group-text" (click)="d.toggle()">
                          <i class="fa fa-calendar" style="cursor: pointer;"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>

                <p class="pt-1">Options</p>

                <select class="custom-select" [(ngModel)]="displayMonths">
                  <option [ngValue]="1">One month</option>
                  <option [ngValue]="2">Two months</option>
                </select>

                <select class="custom-select" [(ngModel)]="navigation">
                  <option value="none">Without navigation</option>
                  <option value="select">With select boxes</option>
                  <option value="arrows">Without select boxes</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-12 col-xl-6">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Range Date Picker</h4>
            </div>
            <div class="card-content">
              <div class="card-body" fxFlex="auto" [perfectScrollbar]="config">
                <ngb-datepicker #dp1111 ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2"
                  [dayTemplate]="t" outsideDays="hidden">
                </ngb-datepicker>

                <ng-template #t let-date let-focused="focused">
                  <span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)"
                    [class.faded]="isHovered(date) || isInside(date)" (mouseenter)="hoveredDate = date"
                    (mouseleave)="hoveredDate = null">
                    {{ date.day }}
                  </span>
                </ng-template>

                <hr>
                <div class="row">
                  <div class="col-12 col-md-6">
                    <p>From: {{ fromDate | json }} </p>
                  </div>
                  <div class="col-12 col-md-6">
                    <p>To: {{ toDate | json }} </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="row">
      <div class="col-12 mt-3 mb-1">
        <h4 class="text-uppercase">Time Picker</h4>
      </div>
    </div>
    <section id="timePicker">
      <div class="row" matchHeight="card">
        <div class="col-md-4 col-lg-4">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Basic Timepicker</h4>
            </div>
            <div class="card-content">
              <div class="card-body">
                <ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
                <hr>
                <p>Selected time: {{time | json}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-lg-4">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Meridian</h4>
            </div>
            <div class="card-content">
              <div class="card-body">
                <ngb-timepicker [(ngModel)]="meridianTime" [meridian]="meridian"></ngb-timepicker>
                <button class="btn btn-outline-{{meridian ? 'success' : 'danger'}} mb-3 mt-3"
                  (click)="toggleMeridian()">
                  Meridian - {{meridian ? "ON" : "OFF"}}
                </button>
                <hr>
                <p>Selected time: {{meridianTime | json}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-lg-4">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Seconds</h4>
            </div>
            <div class="card-content">
              <div class="card-body">
                <ngb-timepicker [(ngModel)]="secondsTime" [seconds]="seconds"></ngb-timepicker>
                <button class="btn btn-outline-{{seconds ? 'success' : 'danger'}} mb-3 mt-3" (click)="toggleSeconds()">
                  Seconds - {{seconds ? "ON" : "OFF"}}
                </button>
                <hr>
                <p>Selected time: {{secondsTime | json}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" matchHeight="card">
        <div class="col-md-4 col-lg-4">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Spinners</h4>
            </div>
            <div class="card-content">
              <div class="card-body">
                <p>This datepicker uses a custom template to display days. All week-ends are displayed with an orange
                  background.</p>
                <ngb-timepicker [(ngModel)]="spinnersTime" [spinners]="spinners"></ngb-timepicker>

                <button class="m-t-1 btn btn-outline-{{spinners ? 'success' : 'danger'}} mb-3 mt-3"
                  (click)="toggleSpinners()">
                  Spinners - {{spinners ? "ON" : "OFF"}}
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-lg-4">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Custom steps</h4>
            </div>
            <div class="card-content">
              <div class="card-body">
                <ngb-timepicker [(ngModel)]="stepsTime" [seconds]="true" [hourStep]="hourStep" [minuteStep]="minuteStep"
                  [secondStep]="secondStep"></ngb-timepicker>

                <div class="row">
                  <div class="col-sm-3">
                    <label for="changeHourStep">Hour Step</label>
                    <input type="number" class="form-control form-control-sm" [(ngModel)]="hourStep" />
                  </div>
                  <div class="col-sm-3">
                    <label for="changeMinuteStep">Minute Step</label>
                    <input type="number" class="form-control form-control-sm" [(ngModel)]="minuteStep" />
                  </div>
                  <div class="col-sm-4">
                    <label for="changeSecondStep">Second Step</label>
                    <input type="number" class="form-control form-control-sm" [(ngModel)]="secondStep" />
                  </div>
                </div>
                <hr>
                <p>Selected time: {{stepsTime | json}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-lg-4">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Custom validation</h4>
            </div>
            <div class="card-content">
              <div class="card-body">
                <p>Illustrates custom validation, you have to select time between 12:00 and 13:59</p>
                <div class="form-group" [class.has-success]="ctrl.valid" [class.has-danger]="!ctrl.valid">
                  <ngb-timepicker [(ngModel)]="validationTime" [formControl]="ctrl" required></ngb-timepicker>
                  <div class="form-control-feedback">
                    <div *ngIf="ctrl.valid">Great choice</div>
                    <div *ngIf="ctrl.errors && ctrl.errors['required']">Select some time during lunchtime</div>
                    <div *ngIf="ctrl.errors && ctrl.errors['tooLate']">Oh no, it's way too late</div>
                    <div *ngIf="ctrl.errors && ctrl.errors['tooEarly']">It's a bit too early</div>
                  </div>
                </div>
                <hr>
                <p>Selected time: {{validationTime | json}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
