<div
  class="content-wrapper"
  ng-if="!myAccess.billingEfficiencyReportAus && !myAccess.billingEfficiencyReportGlobal"
>
  <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;
  }

  .ui-datepicker-calendar {
    display: none;
  }
</style>
<div
  class="content-wrapper"
  ng-if="myAccess.billingEfficiencyReportAus || myAccess.billingEfficiencyReportGlobal"
>
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-12 col-md-6">
          <h1 class="text-olive">
            <go-back />
            <i class="fas fa-book"></i> {{filter.pageName}}
          </h1>
        </div>
        <div class="col-sm-12 col-md-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item">
              <a ng-href="{{baseurl}}/dashboard">Home</a>
            </li>
            <li class="breadcrumb-item active">My Diary</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-3">
              <label for="revenueCenters">Select Revenue Center(s) </label>
              <a
                class="btn btn-xs btn-outline-primary"
                ng-click="selectAllrevenueCenters()"
                >Select All
              </a>
              <ui-select
                id="revenueCenters"
                multiple
                ng-model="filter.revenueCenters"
                ng-click="updateProjectsinRevenueCenter()"
                theme="bootstrap"
                title="Select  Revenue Center"
                class=""
              >
                <ui-select-match
                  placeholder="Select or search a Revenue Center in the list..."
                  >{{$item.rc_name}}</ui-select-match
                >
                <ui-select-choices
                  repeat="rc.revenuecenterid as rc in revenueCenters | filter: $select.search"
                >
                  <span
                    ng-bind-html="rc.rc_name | highlight: $select.search"
                  ></span>
                </ui-select-choices>
              </ui-select>
              <!--select  class="form-control custom-select" ng-model="filter.employee" ng-options="e.id as e.name for e in employee|filter:e.emp_status='active'"></select-->
            </div>

            <div class="col-sm-5">
              <label for="employee">Select Project </label>
              <a
                class="btn btn-xs btn-outline-primary"
                ng-click="selectAllProjects()"
                >Select All
              </a>
              <ui-select
                id="employee"
                multiple
                ng-model="filter.proj_id"
                theme="bootstrap"
                title="Select a Project"
                class=""
              >
                <ui-select-match
                  placeholder="Select or search a Project in the list..."
                  >{{$item.name}}</ui-select-match
                >
                <ui-select-choices
                  repeat="e.id as e in projects | filter: $select.search"
                >
                  <span
                    ng-bind-html="e.name | highlight: $select.search"
                  ></span>
                </ui-select-choices>
              </ui-select>
            </div>
            <div class="col-sm-2">
              <label>Month/Year* </label>
              <input type="month" class="form-control" ng-model="filter.date" />

              <label for="employee">Select Status </label>
              <select
                class="form-control"
                ng-change="filterStatus()"
                ng-model="filter.projStatus"
                ng-options="e.value as e.label for e in projectStatus"
              ></select>
            </div>
            <div class="col-sm-1">
              <label title="Monthly Working Days" for="monthlyWorkingHours"
                >W.Days</label
              >
              <input
                class="form form-control"
                id="monthlyWorkingHours"
                type="number"
                ng-model="filter.selectedMonthBusinessDays"
              />
            </div>

            <div class="col-sm-1">
              <label for="filterBtn">Filter</label>
              <button
                class="btn btn-success form form-control"
                id="filterBtn"
                ng-click="dateChanged()"
              >
                <i class="fa fa-filter"></i> Filter
              </button>
            </div>
            <!--<div class="col-sm-1"><select data-toggle="tooltip" title="View Type" id="viewType" class="form-control custom-select" ng-model="filter.selType" ng-options="p.val as p.val for p in filter.type"></select></div>&ndash;&gt;-->
          </div>
        </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 class="btn-group">
                  <button
                    type="button"
                    title="Fullscreen Toggle"
                    class="btn btn-dark toggle-fullscreen"
                  >
                    <i class="fas fa-expand"></i>
                  </button>
                  <button
                    type="button"
                    class="btn btn-dark"
                    data-widget="collapse"
                  >
                    <i class="fas fa-minus"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="card-body p-0">
              <div class="table table-responsive">
                <span ng-repeat="(key,val) in tblheader"
                  >{{key?key:'Date'}} test</span
                >
                <table
                  class="myDiaryDataTableView table table-bordered table-striped table-sm"
                  id="myDiaryDataTableView"
                >
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Hero</th>
                      <th>Project</th>
                      <th>Revenue Center</th>
                      <th>Allocated Hours (A)</th>
                      <th>Allocated Billing Hours (B)</th>
                      <th title="Actual monthly billed hours">
                        Actual Billed Hours(Monthly) (C)
                      </th>
                      <th
                        title="Actual Billed Hours percentage from allocated hours {(B/A*160)*100}"
                      >
                        Billing Percentage (D)
                      </th>
                      <th title="Mydiary logged hours sum " class="bg-navy">
                        Actual Hours Logged(Monthly) (E)
                      </th>
                      <th
                        title="Mydiary logged hours percentage to allocated hours ({(S/A*20)*100})"
                        class="bg-navy"
                      >
                        Hours logged Percentage (F)
                      </th>
                      <!--<th>Manager</th>-->
                      <!--<th data-toggle="tooltip" title="Hours Per/day" ><small>Billable / Non Billable</small> <i class="fas fa-question-circle"></i></th>-->
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="d in myDiary.default">
                      <td>{{$index+1}}</td>
                      <td>
                        <span>{{d.emp_first_name +' '+d.emp_last_name}}</span>
                      </td>
                      <td><span>{{d.proj_name}}</span></td>
                      <td><span>{{d.rc_name}}</span></td>
                      <td class="text-right">
                        <span>{{d.partialHours|| "0" }}</span>
                      </td>
                      <td class="text-right">
                        <span>{{d.billableHours|| "0" }}</span>
                      </td>
                      <td>
                        <input
                          ng-class="{'is-valid':d.actualbilledhoursfromdb}"
                          class="form-control text-right"
                          ng-readonly="d.islocked"
                          disabled="true"
                          ng-model="d.actualbilledhours"
                          ng-value="{{ d.actualbilledhours ? d.actualbilledhours : d.mngr_sum?  d.mngr_sum : d.monthly_sum}}"
                          type="number"
                          placeholder="Enter Actual Billed hours"
                          maxlength="100"
                        />
                        <span style="display: none"
                          >{{d.mngr_sum ? d.mngr_sum : d.monthly_sum}}</span
                        >
                      </td>
                      <!-- <td  class="text-right"><span>{{d.actualbilledhours && d.partialHours?((d.actualbilledhours/(d.partialHours * filter.selectedMonthBusinessDays)) * 100).toFixed(0):'0'}}</span></td> -->
                      <td class="text-right">
                        <span
                          >{{d.mngr_sum &&
                          d.partialHours?((d.mngr_sum/(d.partialHours *
                          filter.selectedMonthBusinessDays)) *
                          100).toFixed(0):'0'}}</span
                        >
                      </td>

                      <td class="bg-navy text-right">
                        <span>{{d.monthly_sum|| "0" }}</span>
                      </td>
                      <td class="bg-navy text-right">
                        <span
                          >{{d.monthly_sum &&
                          d.partialHours?((d.monthly_sum/(d.partialHours *
                          filter.selectedMonthBusinessDays)) * 100).toFixed(0):
                          "0" }}</span
                        >
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <!-- <div class="card-footer">
              <button
                type="save"
                ng-click="Save(false)"
                class="btn btn-success pull-right"
              >
                <i class="fas fa-plus-square"></i> Save (Billing)
              </button>
              <button
                type="save and lock"
                ng-click="Save(true)"
                class="btn btn-primary pull-right"
              >
                <i class="fas fa-lock"></i> Save and lock (Billing) For
                {{formattedDate}}
              </button>
            </div> -->
          </div>
          <div
            class="card card-primary card-outline"
            ng-if="myDiary.default && myDiary.default.length>0"
          >
            <div class="card-header border-transparent mb-1">
              <h3 class="card-title">Billing Efficiency</h3>
              <div class="card-tools">
                <div class="btn-group">
                  <button
                    type="button"
                    title="Fullscreen Toggle"
                    class="btn btn-dark toggle-fullscreen"
                  >
                    <i class="fas fa-expand"></i>
                  </button>
                  <button
                    type="button"
                    class="btn btn-dark"
                    data-widget="collapse"
                  >
                    <i class="fas fa-minus"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="card-body p-0">
              <div class="table table-responsive">
                <span ng-repeat="(key,val) in tblheader"
                  >{{key?key:'Date'}} test</span
                >
                <table
                  class="table table-bordered table-striped table-sm"
                  id=""
                >
                  <tr>
                    <th>Total Allocated Hours ( Sum of A * Working Days )</th>
                    <td><span>{{totalPartialHours}}</span></td>
                  </tr>
                  <tr>
                    <th>
                      Total Expected Billing Hours ( Sum of B * Working Days )
                    </th>
                    <td><span>{{totalSOWHours}}</span></td>
                  </tr>
                  <tr>
                    <th>Total Actual Billed Hours(Monthly) ( Sum of C )</th>
                    <td><span>{{totalActualBilledHours}}</span></td>
                  </tr>
                  <tr>
                    <th>
                      Overall Billing percentage Actual to Allocated ( (Sum of C
                      / Sum of A * Working Days) * 100 )
                    </th>
                    <td>
                      <span
                        >{{((totalActualBilledHours/(totalPartialHours)) *
                        100).toFixed(3)}}</span
                      >
                    </td>
                  </tr>
                  <tr>
                    <th>
                      Overall Billing percentage Actual to Expected Billing
                      Hours ( (Sum of C / Sum of B * Working Days) * 100 )
                    </th>
                    <td>
                      <span
                        ><strong
                          >{{((totalActualBilledHours/(totalSOWHours)) *
                          100).toFixed(3)}}</strong
                        ></span
                      >
                    </td>
                  </tr>
                  <!-- <tr class="bg-danger">
                    <th>Max possible allocation hours</th>
                    <td><span>{{myDiary.default.length*160}}</span></td>
                  </tr> -->
                  <!-- <tr class="bg-danger">
                    <th>
                      Overall Billing Percentage to actual ( Sum of C / (Total
                      Heroes * 160) )
                    </th>
                    <td>
                      <span
                        >{{((totalActualBilledHours/(myDiary.default.length*160))
                        * 100).toFixed(3)}}</span
                      >
                    </td>
                  </tr> -->
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
