<div class="addHospital-w">
  <div class="container">

    <div class="row" style="margin-bottom: 30px;">
      <div class="col-12">
        <ul class="list-unstyled titileLi-w">
          <li class="headingText-w">خدمه الحركه  </li>
          <li class="headingText-w" style="cursor:pointer" (click)="authSer.perviousLocation()"> تسجيل بيانات الصيانه</li>
          <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typePage}} </li>
        </ul>
      </div>
    </div>

    <div class="containerContent-w">

    <div class="row">
      <div class="col-12">

        <form (ngSubmit)="onSubmitted()" #f="ngForm">
          <div class="row">

            <div class="col-12 col-sm-12 col-md-4">
              <div class="form-group">
                <label for="vehicle_type_id" style="float: right; margin-right: 5px">صنف المركبه</label>
                <select class="form-control" name="vehicle_type_id" (input)="onChangeVehicleType($event)" [disabled]="checkEdit" [ngModel]="formData.vehicle_type_id" required>
                  <option *ngFor="let type of vehicle_types" [value]="type.id">{{type.name}}</option>
                </select>
              </div>
            </div>

            <div class="col-12 col-sm-12 col-md-4" *ngIf='show'>
                <div class="form-group">
                  <label for="vehicle_id" style="float: right; margin-right: 5px"> رقم اللوحه</label>
                  <select class="form-control" name="vehicle_id" [ngModel]="formData.vehicle_id" [disabled]="checkEdit" required>
                    <option *ngFor="let num of licenseNum" [value]="num.id">{{num.plate_number}}</option>
                  </select>
                </div>
              </div>

            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="form-group">
                <label for="startDate" style="float:right" >تاريخ الصيانه<span class="spanReqired-w">*</span></label>
                <div *ngIf='bindingDateSplitStart && typeMode'>
                  <app-higri-date (onDatePicked)="getDate($event, 'start')" [myDate]="bindingDateSplitStart"></app-higri-date>
                </div>
                <div *ngIf='!typeMode'>
                  <app-higri-date (onDatePicked)="getDate($event, 'start')" ></app-higri-date>
                </div>
              </div>
            </div>

            <div class="col-12 col-sm-12 col-md-4 col-lg-4">
              <div class="form-group">
                <label for="endDate" style="float:right" >تاريخ استلام من الصيانه <span class="spanReqired-w">*</span></label>
                <div *ngIf='bindingDateSplitEnd && typeMode'>
                  <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" [myEndDate]="bindingDateSplitEnd"> </app-end-higri-date>
                </div>
                <div *ngIf='!typeMode'>
                  <app-end-higri-date  (onDatePicked)="getDate($event, 'end')" ></app-end-higri-date>
                </div>
              </div>
            </div>

            <div class="col-12 col-sm-12 col-md-12">
              <div class="form-group">
                <label for="maintenance_notes" style="float: right;margin-right: 5px">وصف الصيانه<span class="spanReqired-w">*</span></label>
                <quill-editor id="movement_notes" name="maintenance_notes" [ngModel]="formData.maintenance_notes" >
                </quill-editor>
              </div>
            </div>

            <div class="col-12 col-sm-12 col-md-4">
              <div class="form-group">
                <label for="maintenance_notes" style="float: right;margin-right: 5px">هل تمت الصيانه ؟ <span class="spanReqired-w">*</span></label>
                ,<select name="is_maintained" class="form-control" ngModel [ngModel]="formData.is_maintained" required>
                  <option value="1">نعم</option>
                  <option value="0"> لا</option>
                </select>
              </div>
            </div>

            <div class="col-12">
                <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid || checkSaveclick">حفظ</button>
                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
            </div>

          </div>
        </form>

      </div>
    </div>

    <hr class="hr" *ngIf='typeMode'>

    <div class="row" *ngIf='typeMode'>
      <div class="col-12 col-sm-12 col-md-12 col-lg-6" style="margin: 10px 0;">
        <div class="form-group">
          <span class="spanSelect-w">
            <select [ngModel]="dataTableNumber" class="form-control selectButton-w" (input)="onGetValue($event)">
              <option value="5">5</option>
              <option value="10">10</option>
              <option value="15">15</option>
              <option value="20">20</option>
            </select>
            من العناصر يتم عرضها
          </span>
        </div>
      </div>
      <div class="col-12">
        <!-- taaaaaaaaaaable -->
        <h2 *ngIf="vehicleDataTable.length == 0" class="title"> لايوجد بيانات لعرضها في الجدول </h2>
        <table class="table table-bordered">
          <thead class="headBackground-w">
            <tr>
              <th> تاريخ الصيانه</th>
              <th>تاريخ الإستلام من الصيانه</th>
              <th>تمت الصيانه</th>
              <th>ملاحظات الصيانه</th>
              <th *ngIf="authSer.showEditBtn">تعديل</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of vehicleDataTable | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
              <td>{{data.start_date}}</td>
              <td>{{data.start_date}}</td>
              <td>{{data.is_maintained == 0 ? 'لا' : data.is_maintained == 1 ? 'نعم' : 'not found'}}</td>
              <td [innerHTML] = "data.maintenance_notes"></td>
              <td *ngIf="authSer.showEditBtn"><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
            </tr>
          </tbody>
        </table>
        <pagination-controls nextLabel="التالي" previousLabel="السابق" (pageChange)="onPageChange($event)"></pagination-controls>
      </div>
    </div>
  </div>
  </div>
</div>
