<div class="content-wrapper">
      <!-- This is tip modal -->
    <div uib-modal-window="modal-window" ng-if="isOpenTip" class="modal fade ng-scope ng-isolate-scope in" role="dialog" 
        size="xl" index="0" animate="animate" tabindex="-1" 
        uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" 
        style="z-index: 1050; display: block;">
        <div class="modal-header bg-dark"><strong>Tip of the Day</strong> <button class="btn btn-danger btn-xs" type="button" ng-click="hideTip()"><i class="fas fa-times"></i></button></div>
        <div class="modal-body" id="modal-body">
            <div class="row">
                <div class="form-group col-sm-12">
                    <p><b>{{tips.title | capitalize}}</b></p>
                    <p>{{tips.body | capitalize}}</p>  
                    <p><img alt="{{tips.uploadimage}}" ng-src="{{baseurl}}/app/uploads/{{tips.uploadimage}}" style="width:100%;" />
                    </p> 
                </div>
            </div>
            <div class="modal-footer m-1 p-2">
                <button class="btn btn-default" type="button" ng-click="needhelp(tips.id);"><i class="fas fa-times"></i> Need Help To Understand</button>
                <button class="btn btn-primary" type="button" ng-click="ok(tips.id);"><i class="fas fa-check"></i> OK, Understood</button>
            </div>    
        </div>
    </div>
  <div ng-if="isOpenTip" uib-modal-backdrop="modal-backdrop" class="modal-backdrop fade ng-scope in" 
      ng-style="{'z-index': 1040 + (index &amp;&amp; 1 || 0) + index*10}" uib-modal-animation-class="fade" 
      modal-in-class="in" modal-animation="true" data-bootstrap-modal-aria-hidden-count="1" aria-hidden="true" style="z-index: 1040;">
  </div>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Dashboard</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li ng-if="gUser.is_admin" class="breadcrumb-item"><a target="_blank" href="{{baseurl}}/app/uploads/Project Creation Template.docx">Project Creation Template</a></li>
                        <li class="breadcrumb-item active">Home</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <section class="content" ng-if="getAllNotfications.length>0">
        <div class="row ">
            <div class="col-md-11 col-sm-12 pull-center p-0">
                <div class="graph-ui mb-4 bg-white">
                    <div class="text-center mb-3"><strong>Notifications</strong></div>
                    <div class="card-body pb-0">
                        <div class="row">
                            <div ng-repeat="notify in getAllNotfications" class="col-sm-3">
                                <div class="small-box bg-gradient-warning">
                                    <div class="inner">
                                        <h3>{{ notify.count}}</h3>
                                        <p></p>{{ notify.message | capitalize }}</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fas {{notify.icon}}"></i>
                                    </div>
                                    <a ng-href="{{notify.link}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="content" ng-if="projectsearlier.length>0">
        <div class="row ">
            <div class="col-md-11 col-sm-12 pull-center p-0">
                <div class="graph-ui mb-4 bg-white">
                    <div class="graph-ui-caption text-center mb-3"><strong>Project Timeline Graph</strong></div>
                    <div id="projTimelineGraph"></div>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="{{projectsearlier.length > 0 ? 'col-md-6' : 'col-md-12'}}">
                    <div class="card card-dark card-outline">
                        <div class="card-header">
                            <h5 class="card-title"><i class="fas fa-tachometer-alt"></i> Dashboard</h5>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool toggle-fullscreen"><i class="fas fa-expand"></i></button>
                                <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="card-body pb-0">
                            <div class="row">
                                <div class="{{projectsearlier.length > 0 ? 'col-sm-3' : 'col-sm-2'}}" ng-repeat="dCard in menus" ng-if="!dCard.child">
                                    <div class="{{'small-box ' + dCard.type + ' bg-gradient-primary'}}">
                                        <div class="inner">
                                            <h3>{{dCard.hasBadge ? dCard.badgeCount :'&nbsp;'}}</h3>
                                            <p>{{dCard.name}}</p>
                                        </div>
                                        <div class="icon">
                                            <i class="{{'fas '+dCard.icon}}"></i>
                                        </div>
                                        <a ng-href="{{dCard.href}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 projectTimeline" ng-if="projectsearlier.length>0">
                    <div class="card card-dark card-outline">
                        <div class="card-header">
                            <h5 class="card-title"><i class="fas fa-chart-line"></i> Project Timeline</h5>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool toggle-fullscreen"><i class="fas fa-expand"></i></button>
                                <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="col-md-12">
                                <ul class="timeline">
                                    <li ng-repeat="project in projectsearlier" data-date="{{project.new}}" class="{{project.new ? 'time-label' : ''}}">
                                        <span ng-if="project.new" class="bg-success nowrap" ng-bind="formatDate(project.fromDate) | date:'dd MMM yyyy'"></span>
                                        <i class="fas pf-char bg-green {{project.char}}" data-char-content="{{project.char}}" ng-if="!project.new"></i>
                                        <div class="timeline-item" ng-if="!project.new">
                                            <h3 class="timeline-header no-border row p-0">
                                                <div class="col-sm-10">
                                                    <a ng-if="false" href="" ng-click="goToSelf('accountView',{accountid:project.accountid})">{{project.acc_company_name}}</a>
                                                    <span ng-if="false"> : </span>
                                                    <a ng-href="#" ng-click="goToSelf('projectView',{projectid:project.projectid})">{{project.proj_name}}</a>
                                                </div>
                                                <div class="col-sm-2 pr-1">
                                                    <span class="btn btn-group pull-right pr-0">
                                                    <span class="btn badge bg-danger nowrap" ng-bind="formatDate(project.updatedAt) | date:'dd MMM yyyy'" ng-if="!project.isOngoing"></span>
                                                    <span class="btn badge bg-success nowrap" ng-bind="'On Going'" ng-if="project.isOngoing"></span>
                                                    <span class="btn badge bg-success" title="Allocation Hours"><i class="fas fa-clock"></i> {{project.partialHours}} </span>
                                                        </span>
                                                </div>
                                            </h3>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row" ng-if="myAccess.projectEdit">
                <div class="col-md-6 col-lg-5">
                    <div class="card card-dark card-outline">
                        <div class="card-header">
                            <h5 class="card-title">Project Report</h5>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="card-body pb-0 pt-0">
                            <div class="table-responsive">
                                <table id="dashBoardProjectList" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Project</th>
                                        <th data-toggle="tooltip" title="Requirement">Req.</th>
                                        <th data-toggle="tooltip" title="Allocation">Aloc.</th>
                                        <th><i class="fas fa-cog"></i></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="pl in projectLoading">
                                        <td><span class="text-blue pointer" ng-click="goToSelf('projectView',{projectid:pl.proj_id})">{{pl.proj_name}}</span></td>
                                        <td>{{pl.need}}</td>
                                        <td>{{pl.supply}}</td>
                                        <td><span class="pointer" ng-click="getProjectInfo(pl)"> <i class="fas fa-eye"></i> </span></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-7" ng-if="projectDetails.length > 0">
                    <div class="card card-dark card-outline">
                        <div class="card-header">
                            <h5 class="card-title">Project Report of <strong>
                                <div class="text-blue pointer d-inline-block dashboard-project-details " ng-click="goToSelf('projectView',{projectid:activeProject.proj_id})">{{activeProject.proj_name}}</div>
                            </strong></h5>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
                                <button type="button" class="btn btn-tool" ng-click="closeProjectDetails()"><i class="fas fa-times"></i></button>
                            </div>
                        </div>
                        <div class="card-body pb-0 pt-0">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                    <tr>
                                        <th rowspan="2">Designation</th>
                                        <th colspan="2">Requirement</th>
                                        <th colspan="2">Allocation</th>
                                        <th rowspan="2">Brief Summary</th>
                                    </tr>
                                    <tr>
                                        <th>Qty</th>
                                        <th>For</th>
                                        <th>Qty</th>
                                        <th>For</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="pd in projectDetails">
                                        <td>{{pd.expectation.desg_name ? pd.expectation.desg_name : pd.allocations.desg_name }}</td>
                                        <td>{{pd.expectation.designation_qty}}</td>
                                        <td>{{pd.expectation.designation_hours}}</td>
                                        <td>{{pd.allocations.supply}}</td>
                                        <td>{{pd.allocations.supply_hours}}</td>
                                        <td ng-if="!pd.expectation.designation_qty"><span class="badge badge-danger"><i class="fas fa-arrow-left"></i> Unknown Allocation</span></td>
                                        <td ng-if="!pd.allocations.supply">
                                            <span class="badge badge-warning"><i class="fas fa-arrow-left"></i> Need {{pd.expectation.designation_qty-pd.allocations.supply}} More
                                            {{pd.expectation.designation_date ? '('+(pd.expectation.designation_date | date:'dd MMM yyyy')+')':''}}
                                        </span></td>
                                        <td ng-if="pd.allocations.supply && pd.expectation.designation_qty && pd.allocations.supply > pd.expectation.designation_qty">
                                            <span class="badge badge-info"><i class="fas fa-arrow-left"></i> {{pd.allocations.supply-pd.expectation.designation_qty}} Extra Allocation</span>
                                        </td>
                                        <td ng-if="pd.allocations.supply && pd.expectation.designation_qty && pd.allocations.supply < pd.expectation.designation_qty">
                                            <span class="badge badge-warning">
                                                <i class="fas fa-arrow-left"></i> Need {{pd.expectation.designation_qty-pd.allocations.supply}} More
                                            {{pd.expectation.designation_date ? '('+(pd.expectation.designation_date | date:'dd MMM yyyy') +')':''}}
                                            </span>
                                        </td>
                                        <td ng-if="pd.allocations.supply && pd.expectation.designation_qty && pd.allocations.supply == pd.expectation.designation_qty && pd.allocations.supply_hours != pd.expectation.designation_hours">
                                            <span class="badge badge-secondary"><i class="fas fa-arrow-left"></i> Hours Difference</span>
                                        </td>
                                        <td ng-if="pd.allocations.supply && pd.expectation.designation_qty && pd.allocations.supply == pd.expectation.designation_qty && pd.allocations.supply_hours == pd.expectation.designation_hours">
                                            <span class="badge badge-success"> Done </span>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>