<div class="content-wrapper" ng-if="!myAccess.projectView">
    <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.projectView">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-success">
                        <go-back/>
                        <i class="fas fa-table"></i> Project 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}}/projects/list">Projects</a></li>
                        <li class="breadcrumb-item active">View</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-6">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title text-success"><i class="fas fa-table"></i> Project Information</h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                                <i class="fas fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-12">
                                <h4>{{project.proj_name}}</h4>
                                <div class="text-muted more">
                                    <span class="collapse" id="collapseExample" aria-expanded="false">{{project.proj_description}}</span>
                                    <a ng-if="project.proj_description.length > 160" role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></a>
                                </div>
                                <div class="text-muted mt-2">
                                    <table class="table table-bordered table-sm">
                                        <tr>
                                            <th>Client</th>
                                            <td><b ng-click="goToSelf('accountView',{accountid:project.accountid})" ng-if="project.accountid" class="pointer d-block nowrap badge bg-success"><i class="fas fa-external-link-alt"> </i> {{project.acc_company_name}}</b></td>
                                        </tr>
                                        <tr>
                                            <th>Project Manager</th>
                                            <td><b ng-click="goToSelf('heroView',{employeeid:project.employeeid})" ng-if="project.employeeid" class="pointer d-block nowrap badge bg-success"><i class="fas fa-external-link-alt"> </i> {{project.emp_first_name+' '+project.emp_last_name}}</b></td>
                                        </tr>
                                        <tr>
                                            <th>From</th>
                                            <td><span ng-if="project.proj_start_date" class="nowrap badge bg-gray-dark" ng-bind="formatDate(project.proj_start_date) | date:'dd MMM yyyy'"></span></td>
                                        </tr>
                                        <tr>
                                            <th>Expected</th>
                                            <td><span ng-if="project.proj_expected_end_date" class="nowrap badge bg-gray-dark" ng-bind="formatDate(project.proj_expected_end_date) | date:'dd MMM yyyy'"></span></td>
                                        </tr>
                                        <tr>
                                            <th>Status</th>
                                            <td><span class="nowrap badge {{getActiveClass(project.proj_status)}}">{{project.proj_status  | capitalize}}</span></td>
                                        </tr>
                                        <tr>
                                            <th>Nature Of Project</th>
                                            <td><span>{{project.proj_nature  | capitalize}}</span></td>
                                        </tr>
                                        <tr> 
                                            <th>Generate Invoice</th> 
                                            <td> 
                                                <a class="pointer d-block nowrap badge badge-primary btn-xs" ng-href="{{baseurl}}/invoices/add/{{param.projectid}}/">
                                                    <i class="fas fa-external-link-alt"> </i> Create Invoice</a> 
                                            </td> 
                                        </tr>
                                        <tr ng-if="project.proj_status!=='active'">
                                            <th ng-if="project.proj_status!=='active'">Last Status Updated On</th>
                                            <t><span ng-if="project.proj_status!=='active'" class="nowrap badge bg-danger" ng-bind="formatDate(project.updatedAt) | date:'dd MMM yyyy'"></span></t>
                                        </tr>
                                        <tr>
                                            <th>Add Project Weeks</th> 
                                            <td> 
                                                <a class="pointer d-block nowrap badge badge-primary btn-xs" ng-href="{{baseurl}}/projects/addprojectforecast/{{param.projectid}}">
                                                    <i class="fas fa-external-link-alt"> </i> Add Project Weeks Detail</a> 
                                            </td> 
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title text-success"><i class="fas fa-users"></i> Min. Team Effort</h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                                <i class="fas fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-12">
                                <div class="text-muted">
                                    <table class="table table-bordered table-sm">
                                        <tr>
                                            <th>Hero Type</th>
                                            <th>No. of Hero</th>
                                            <th>Hours Per/Day</th>
                                            <th>As on</th>
                                        </tr>
                                        <tr ng-repeat="mte in minTeamEffort">
                                            <td>{{mte.desg_name}}</td>
                                            <td>{{mte.designation_qty}}</td>
                                            <td>{{mte.designation_hours}}</td>
                                            <td>{{mte.designation_date | date : 'dd MMM yy'}}</td>
                                        </tr>
                                        <tr ng-if="minTeamEffort.length === 0">
                                            <td colspan="3" class="text-center">Not Available</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-outline card-success">
                        <div class="card-header border-transparent">
                            <h3 class="card-title">Hero List ({{allocations.length}})</h3>
                            <div class="card-tools">
                                <div class="btn-group">
                                    <button ng-if="(project.proj_status==='active' ||project.proj_status==='upcoming') && myAccess.allocationAdd" ng-click="goToSelf('projectHeroAdd',{projectid:project.projectid})" type="button" class="btn btn-warning"><i class="fas fa-plus"></i> Add Hero to this Project</button>
                                    <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">
                                <table id="projectView" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <!--<th>Project</th>-->
                                        <th>Name</th>
                                        <th>Act as</th>
                                        <th>Manager</th>
                                        <th>Project Manager</th>
                                        <th>From</th>
                                        <th ng-if="gUser.is_admin">Billable Hours</th>
                                        <th data-toggle="tooltip" title="Hours Per/day">Allocation <i class="fas fa-question-circle"></i></th>
                                        <th ng-if="gUser.is_admin">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="allocation in allocations">
                                        <!--<td><div>{{allocation.proj_name}}</div></td>-->
                                        <td>
                                            <span class="text-blue pointer" ng-click="goToSelf('heroView',{employeeid:allocation.employeeid})">{{allocation.emp_first_name+' '+allocation.emp_last_name}}</span>
                                            <span>{{' (' + allocation.emp_code+')'}}</span><br>
                                            <span>{{allocation.emp_designation_name}}</span>
                                        </td>
                                        <td title="{{allocation.emp_designation_name}}">{{allocation.willActAsName ? allocation.willActAsName : allocation.emp_designation_name}}</td>
                                        <td><span class="text-blue pointer" ng-click="goToSelf('heroView',{employeeid:allocation.linemgr.employeeid})">{{allocation.linemgr.emp_first_name+' '+allocation.linemgr.emp_last_name}}</span><br>
                                            <span>{{' (' + allocation.linemgr.emp_code+')'}}</span></td>
                                        <td><span class="text-blue pointer" ng-click="goToSelf('heroView',{employeeid:allocation.projmgr.employeeid})">{{allocation.projmgr.emp_first_name+' '+allocation.projmgr.emp_last_name}}</span><br>
                                            <span>{{' (' + allocation.projmgr.emp_code+')'}}</span></td>
                                        <!--<td><span class="nowrap badge btn-danger" ng-if="allocation.emp_pool>0">{{hoursToPercent(allocation.emp_pool)}}</span></td>-->
                                        <td><span class="nowrap" ng-bind="formatDate(allocation.fromDate) | date:'dd MMM yyyy'"></span></td>
                                        <td ng-if="gUser.is_admin"><span class="nowrap font-weight-bold">{{allocation.billableHours ? allocation.billableHours : '-' }}</span></td>
                                        <!--<td><span class="nowrap badge btn-success" ng-if="allocation.partialHours>0">{{hoursToPercent(allocation.partialHours)}}</span></td>-->
                                        <td><span class="nowrap font-weight-bold">{{allocation.partialHours ? allocation.partialHours : '-' }}</span></td>
                                        <td ng-if="gUser.is_admin">
                                            <button ng-if="myAccess.allocationEdit" type="button" class="btn bg-purple" ng-click="goToSelf('projectHeroEdit',{allocationid:allocation.allocationid})"><i class="fas fa-pen"></i> <span class="d-none d-lg-inline"> Edit </span></button>
                                            <button ng-if="myAccess.allocationDelete" type="button" class="btn btn-danger" ng-click="setReleaseUser(allocation)" ng-disabled="allocation.isAllowToEditLocation"><i class="fas fa-trash"></i> <span class="d-none d-lg-inline"> Release </span></button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script type="text/ng-template" id="modelDynamic.html">
        <div class="">
            <div class="modal-header bg-danger">
                <h3 class="modal-title" id="modal-title">Release from project</h3>
            </div>
            <div class="modal-body" id="modal-body">
                <p>Are you sure to release <strong>{{data.allocation.emp_first_name +' '+ data.allocation.emp_last_name }} </strong> from project <strong> {{data.project.proj_name}}</strong></p>

                <div class="form-group">
                    <label for="allocation_release_comment">Reason of Releasing:</label>
                    <textarea required="required" ng-model="data.allocation.change_comment" id="allocation_release_comment" ng-required="true" class="form-control" rows="2" placeholder="Reason of Status Change" ></textarea>
                    <!--<span class="pull-right">({{1024-data.allocation.change_comment.length}} char left)</span>-->
                </div>
                <div class="form-group">
                    <label for="allocation_hero_feedback">Overall Hero's Feedback :</label>
                    <textarea required="required" ng-model="data.allocation.hero_feedback" id="allocation_hero_feedback" ng-required="true" class="form-control" rows="2" placeholder="Hero's feedback for current project" ></textarea>
<!--                    <span class="pull-right">({{1024-data.allocation.hero_feedback.length}} char left)</span>-->
                </div>
                <div class="form-group">
                    <label for="fromDate">Date of Release</label>
                    <input id="fromDate" type=text date-picker placeholder='DD-MM-YYYY' dateformat='dd-mm-yy' default='' maxlength="10" ng-required='true' class='form-control' ng-model='data.allocation.toDate'/>
                </div>
            </div>
            <div class="modal-footer bg-danger">
                <button class="btn btn-default" type="button" ng-click="ok()">OK</button>
                <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </script>
</div>
