<div class="content-wrapper" ng-if="!myAccess.accountView">
    <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>
<div class="content-wrapper" class="modal-demo" ng-if="myAccess.accountView">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-primary">
                        <go-back/>
                        <i class="fas fa-user-secret"></i> Account View
                    </h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a ng-href="{{baseurl}}/dashboard">Home</a></li>
                        <li class="breadcrumb-item"><a ng-href="{{baseurl}}/accounts/list">Account</a></li>
                        <li class="breadcrumb-item active">View</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-sm-3">
                <div class="card card-widget widget-user-2">
                    <div class="widget-user-header bg-primary">
                        <span class="edit float-right pointer" ng-if="myAccess.accountEdit" title="Edit"><i ng-click="goToSelf('accountEdit',{accountid : account.accountid})" class="fas fa-pen-square"></i></span>
                        <div class="widget-user-image">
                            <img class="img-circle elevation-2" src="{{baseurl}}/app/static/img/default-150x150.png" alt="User Avatar">
                        </div>
                        <h3 class="widget-user-username">{{account.acc_company_name}}</h3>
                        <h5 class="widget-user-desc" ng-if="false"></h5>
                    </div>
                    <div class="card-footer p-0">
                        <ul class="nav flex-column">
                            <!--<li class="nav-item" data-placement="right" data-toggle="tooltip" title="Email"><a href="#" class="nav-link">{{account.acc_email}}<span class="float-right"><i class="fas fa-envelope"></i></span></a></li>-->
                            <!--<li class="nav-item" data-placement="right" data-toggle="tooltip" title="Mobile"><a href="#" class="nav-link">{{account.acc_primany_contact}}<span class="float-right"><i class="fas fa-phone"></i></span></a></li>-->
                            <li class="nav-item"><span class="nav-link text-blue">Billable (Hours) : <span class="float-right">{{accountAllocation.partialHoursBillable}}</span></span></li>
                            <li class="nav-item"><span class="nav-link text-blue">Non-Billable (Hours) :<span class="float-right">{{accountAllocation.partialHoursNonBillable}}</span></span></li>
                            <li class="nav-item"><span class="nav-link text-blue">Total Allocation (Hours) :<span class="float-right">{{accountAllocation.totalAllocation}}</span></span></li>
                            <li class="nav-item"><span class="nav-link text-blue">Total Heroes Allocated: <span class="float-right">{{accountAllocation.heroes.length}}</span></span></li>
                            <li class="nav-item"><span class="nav-link text-blue">Total Projects: <span class="float-right">{{projects.length}}</span></span></li>
                            <li class="nav-item"><span class="nav-link text-blue">Total Active Projects: <span class="float-right">{{(projects | filter:statusTrueFilter).length}}</span></span></li>
                            <!-- <li class="nav-item"><span class="nav-link text-blue">Total InActive Projects: <span class="float-right">{{(projects | filter:statusFalseFilter).length}}</span></span></li> -->
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="card card-outline card-primary">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <div class="text-center mt-1">Projects</div>
                            <table id="accountView" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>
                                        <small>Project Name</small>
                                    </th>
                                    <th>
                                        <small>From Date /</small><small class="nowrap">Expected Date</small>
                                    </th>
                                    <th>
                                        <small>Project Manager</small>
                                    </th>
                                    <th>
                                        <small>Status</small>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="project in projects">
                                    <!-- <td><span class="nowrap pointer text-blue" ng-click="goToSelf('projectView',{projectid:project.projectid})">{{project.proj_name}}</span></td> -->
                                    <td><a href="/projects/view/{{project.projectid}}">{{project.proj_name}}</a></td>

                                    <td>
                                        <span class="nowrap badge bg-green" ng-bind="formatDate(project.proj_start_date) | date:'dd MMM yyyy'"></span><br/>
                                        <span class="nowrap badge bg-red" ng-if="project.proj_expected_end_date" ng-bind="formatDate(project.proj_expected_end_date) | date:'dd MMM yyyy'"></span>
                                    </td>
                                    <td>
                                        <span ng-if="project.employeeid"><a class="nowrap" ng-href="{{baseurl+'/heroes/view/'+project.employeeid}}">
                                                <i class="fas fa-external-link-square-alt"></i>  {{project.emp_first_name+' '+project.emp_last_name}}</a></span><br>
                                        <span ng-if="project.emp_email"><a href="{{'mailto:'+project.emp_email}}" target="_blank">{{project.emp_email}}</a></span><br>
                                        <span ng-if="project.emp_mobile"><a target="_blank" href="{{'tel:+91'+project.emp_mobile}}">{{project.emp_mobile}}</a></span>
                                    </td>
                                    <td><span class="nowrap badge {{getActiveClass(project.proj_status)}}">{{project.proj_status | capitalize}}</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                </div>
            </div>
            <div data-info="My Team" class="col-md-12">
                <div class="card card-outline card-warning">
                    <div class="card-header border-transparent">
                        <h3 class="card-title"><strong>Teams</strong></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-responsive">
                            <table id="teamView" class="teamView table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Hero</th>
                                    <th>Project</th>
                                    <th>From</th>
                                    <th data-toggle="tooltip" title="Shadow Hours Per/day">Non-Billable <i class="fas fa-question-circle"></i></th>
                                    <th data-toggle="tooltip" title="Hours Per/day">Billable <i class="fas fa-question-circle"></i></th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="hero in accountAllocation.heroes">
                                    <td><span class="text-blue pointer" ng-click="goToSelf('heroView',{employeeid:hero.employeeid})">{{hero.emp_first_name +' '+hero.emp_last_name}}</span><br/><span>({{hero.emp_code}})</span></td>
                                    <td><span class="text-blue pointer" ng-click="goToSelf('projectView',{projectid:hero.projectid})">{{hero.proj_name}}</span></td>
                                    <td><span class="nowrap" ng-bind="formatDate(hero.fromDate) | date:'dd MMM yyyy'"></span></td>
                                    <!--<td><span class="badge badge-{{hero.isBillable ? 'success' : 'danger' }}">{{hero.isBillable ? 'Yes' : 'No'}}</span></td>-->
                                    <!--<td><span class="nowrap font-weight-bold">{{hero.partialHours > hero.billableHours  ? hero.partialHours - hero.billableHours :'-'}}</span></td>-->
                                    <td><span class="nowrap font-weight-bold">{{hero.partialHoursNonBillable ? hero.partialHoursNonBillable :'-'}}</span></td>
                                    <td><span class="nowrap font-weight-bold">{{hero.partialHoursBillable ? hero.partialHoursBillable :'-'}}</span></td>
                                    <td>
                                        <!-- <button type="button" class="btn btn-success" title="View in project" ng-click="goToSelf('projectView',{projectid:hero.proj_id})"> -->
                                        <a class="btn btn-success" href="/projects/view/{{hero.proj_id}}"><i class="fas fa-table"></i> <span class="d-none d-lg-inline"> View in project </span></a></button>
                                    </td>
                                </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td>{{getNonBillableHours(accountAllocation.heroes)}}</td>
                                        <td>{{getBillableHours(accountAllocation.heroes)}}</td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>
