<div class="content-wrapper" ng-if="!myAccess.unfilledDiaryReport">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 offset-sm-1 offset-md-2 offset-lg-3 mt-5">
        <div class="alert alert-warning alert-dismissible">
          <h5><i class="icon fas fa-ban"></i> Warning!</h5>
          Unauthorised Access.
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .customTooltip {
    padding: 0 20px;
  }
  .form-control.is-valid,
  .was-validated .form-control:valid {
    padding-right: 0px !important;
    background-position: right calc(0.5em + 0.15rem) !important;
    background-size: calc(0.1em + 0.375rem) calc(0.1em + 0.375rem) !important;
  }
  #blackout {
    width: 100%;
    height: 100%; /* make sure you have set parents to a height of 100% too*/
    position: absolute;
    background: #0202027a;
    left: 0;
    top: 0;
    z-index: 10; /*just to make sure its on top*/
  }
</style>
<div id="blackout" style="display: none"></div>
<div class="content-wrapper" ng-if="myAccess.unfilledDiaryReport">
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-3">
          <h1 class="text-olive ng-binding">
            <go-back class="ng-isolate-scope"
              ><span class="pointer" title="Back"
                ><i class="fas fa-chevron-left"></i></span
            ></go-back>
            <i class="fas fa-book"></i> Billing Lock Report
          </h1>
        </div>
        <div class="col-sm-2 offset-2"></div>
        <div class="col-sm-5">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item">
              <a ng-href="/dashboard" href="/dashboard">Home</a>
            </li>
            <li class="breadcrumb-item active">Billing Lock Report</li>
          </ol>
        </div>
      </div>
    </div>
    <!-- /.container-fluid -->
  </section>
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="form-group row">
            <div class="col-sm-2">
              <input
                type="month"
                class="form-control ng-pristine ng-valid ng-empty ng-touched"
                ng-model="filter.monthyear"
              />
            </div>

            <div class="col-sm-2">
              <button class="btn btn-success" ng-click="dateChanged()">
                <i class="fa fa-filter"></i> Filter
              </button>
              <button
                ng-if="isLocked==true && isAdmin=='1'"
                class="btn btn-success float-right"
                ng-disabled="isLocked==false"
                ng-click="unlockMonthlyBilling()"
              >
                <i class="fa fa-save"></i> Unlock Monthly Billing
              </button>
            </div>
          </div>
          <img
            class="loading-gif"
            ng-show="showLoader"
            ng-src="{{baseurl}}/app/uploads/loading.gif"
          />
        </div>
        <div class="col-md-12">
          <div class="card card-primary card-outline">
            <div class="card-header border-transparent mb-1">
              <h3 class="card-title">Report</h3>
              <div class="card-tools"></div>
            </div>
            <div class="card-body p-0">
              <div class="table table-responsive">
                <table
                  class="myDiaryDataTableView table table-bordered table-striped table-sm"
                  id="myDiaryDataTableView"
                >
                  <thead>
                    <tr>
                      <th class="">Revenue Center</th>
                      <th class="">Project</th>
                      <th class="">Billing Status</th>
                      <th class="">Locked By</th>
                      <th class="">Locked At</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="d in lockedReport">
                      <td>{{d.rc_name}}</td>
                      <td>{{d.proj_name}}</td>
                      <td>{{d.is_locked}}</td>
                      <td>{{d.emp_first_name}} {{d.emp_last_name}}</td>
                      <td>{{d.locked_at | datetz:'DD-MMM-YYYY'}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<style>
  .loading-gif {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: 50px 0px 0px -50px;
    width: 10%;
    z-index: 999;
  }
  .weekend {
    background-color: gray;
  }
  .fixedHeader {
    background-color: #f1f1f1;
    z-index: 9999;
  }
  th,
  td {
    white-space: nowrap;
  }
</style>
