<div class="content-wrapper" ng-if="!myAccess.allocationAdd">
    <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.allocationAdd">
    <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">
                    <div class="card-header">
                        <h3 class="card-title text-success"><i class="fas fa-table"></i> {{project.proj_name}}</h3>
                        <div class="card-tools">
                            <button type="button" class="btn btn-tool btn-xs" 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 more">
                                    <a ng-if="project.proj_description.length > 160" role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></a>
                                    <span class="collapse" id="collapseExample" aria-expanded="false">{{project.proj_description}}</span>
                                </div>
                                <div class="text-muted mt-2">
                                    <table class="table table-bordered table-sm">
                                        <tr>
                                            <td>Account</td>
                                            <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>
                                            <td>Project Manager</td>
                                            <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>
                                            <td>From</td>
                                            <td><span ng-if="project.proj_start_date" class="nowrap badge bg-black" ng-bind="formatDate(project.proj_start_date) | date:'dd MMM yyyy'"></span></td>
                                        </tr>
                                        <tr>
                                            <td>Expected</td>
                                            <td><span ng-if="project.proj_expected_end_date" class="nowrap badge bg-danger" ng-bind="formatDate(project.proj_expected_end_date) | date:'dd MMM yyyy'"></span></td>
                                        </tr>
                                        <tr>
                                            <td>Status</td>
                                            <td><span class="nowrap badge {{getActiveClass(project.proj_status)}}">{{project.proj_status  | capitalize}}</span></td>
                                        </tr>
                                        <tr ng-if="project.proj_status!=='active'">
                                            <td ng-if="project.proj_status!=='active'">Last Status Updated On</td>
                                            <td><span ng-if="project.proj_status!=='active'" class="nowrap badge bg-danger" ng-bind="formatDate(project.updatedAt) | date:'dd MMM yyyy'"></span></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <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 btn-xs" 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>
                                            <td>Hero Type</td>
                                            <td>No. of Hero</td>
                                            <td>Hours Per/Day</td>
                                        </tr>
                                        <tr ng-repeat="mte in minTeamEffort">
                                            <td>{{mte.desg_name}}</td>
                                            <td>{{mte.designation_qty}}</td>
                                            <td>{{mte.designation_hours}}</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">
                        <div class="card-header">
                            <h3 class="card-title text-success"><i class="fas fa-users"></i> Select Heroes </h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool btn-xs {{viewConditions.btnTxtCls}}" title="{{viewConditions.btnTxt}}" ng-click="viewConditionsHandler()">
                                    <i class="fas {{viewConditions.ico}}"></i> {{viewConditions.btnTxt}}
                                </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 btn-xs" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                                    <i class="fas fa-minus"></i></button>
                            </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>#</th>
                                        <th>Hero Info</th>
                                        <th>Department</th>
                                        <th>Designation</th>
                                        <th>DoJ <i class="fas fa-question-circle" data-toggle="tooltip" title="Date of Joining"></i></th>
                                        <th>YoE <i class="fas fa-question-circle" data-toggle="tooltip" title="Years of Experiences"></i></th>
                                        <th>Availability</th>
                                        <th>Shadow</th>
                                        <th>Skills</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="hero in heroes | filter : {emp_code : '! E-999'}">
                                        <td>
                                            <div class="form-check">
                                                <input id="hero" name="hero" ng-model="allocation.emp_id" class="form-check-input" type="radio" value="{{hero.employeeid}}">
                                            </div>
                                        </td>
                                        <td>
                                            <span>{{hero.emp_nick_name || hero.emp_first_name}} ({{hero.emp_code}})</span>
                                            <br/><span>{{hero.emp_email}}</span>
                                        </td>
                                        <td><span class="badge {{hero.emp_department.toLowerCase()}}">{{hero.emp_department}}</span></td>
                                        <td><span>{{hero.emp_designation}}</span></td>
                                        <td><span>{{hero.emp_doj}}</span></td>
                                        <td><span>{{hero.emp_exp ? hero.emp_exp : '#NA'}}</span></td>
                                        <td><span class="badge badge-success">{{hoursToPercent(hero.emp_pool ? hero.emp_pool : 0)}}</span></td>
                                        <td><span class="badge badge-secondary" ng-if="hero.emp_shadow">{{hoursToPercent(hero.emp_shadow ? hero.emp_shadow : '#NA')}}</span></td>
                                        <td><span>{{hero.emp_skills}}</span></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card card-outline card-success">
                        <br/>
                        <div class="card-body p-0">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="willActAs">Will act as</label>
                                    <ui-select id="willActAs"   theme="bootstrap" title="Please select a designation"
                                            ng-model="allocation.willActAs"  >
                                        <ui-select-match placeholder="Please select a designation ...">{{$select.selected.desg_name}}</ui-select-match>
                                        <ui-select-choices repeat="ps in designationOptions | filter: $select.search track by $index">
                                            <span ng-bind-html="ps.desg_name | highlight: $select.search"></span>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                                <div class="form-group">
                                    <label for="line_mngr_id">Manager</label>
                                    <select id="line_mngr_id" class="form-control custom-select" disabled
                                            ng-model="allocation.line_mngr_id" ng-options="l.employeeid as (l.emp_first_name+' '+l.emp_last_name) for l in managers">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="proj_mngr_id">Project Manager</label>
                                    <select id="proj_mngr_id" class="form-control custom-select"
                                            ng-model="allocation.proj_mngr_id" ng-options="l.employeeid as (l.emp_first_name+' '+l.emp_last_name) for l in managers">
                                    </select>
                                </div>
                                <!--<div class="form-group">
                                    <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
                                        <input type="checkbox" ng-model="allocation.isBillable" class="custom-control-input" id="customSwitch1">
                                        <label class="custom-control-label" for="customSwitch1">Is Billable</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="billingRatio">Allocation Ratio</label>
                                    <select id="billingRatio" class="form-control custom-select"
                                            ng-model="allocation.billingRatio" ng-options="l.value as l.label for l in billingRatioOption">
                                    </select>
                                </div>
                                <div class="form-group" ng-if="allocation.billingRatio==='Partial'">
                                    <label for="partialHours">Hours</label>
                                    <input ng-model="allocation.partialHours" type="number" id="partialHours" class="form-control" placeholder="Hours">
                                </div>-->
                                <div class="form-group">
                                    <label for="billableHours"><i class="fas fa-rupee-sign"></i> Billable Hours</label>
                                    <input ng-model="allocation.billableHours" min="0" type="number" id="billableHours" class="form-control" placeholder="Billable Hours">
                                </div>
                                <div class="form-group">
                                    <label for="totalHours">Total Hours ( <i class="fas fa-rupee-sign"></i> Billable Hours <i class="fas fa-plus"></i> Non-Billable Hours )</label>
                                    <input ng-model="allocation.partialHours" min="{{allocation.billableHours }}" type="number" id="totalHours" class="form-control" placeholder="Total Hours">
                                </div>
                                <div class="form-group">
                                    <label for="fromDate">Date of Assignment</label>
                                    <input id="fromDate" type=text date-picker
                                           placeholder='DD-MM-YYYY'
                                           dateformat='dd-mm-yy'
                                           maxlength="10"
                                           ng-required='true'
                                           class='form-control'
                                           ng-model='allocation.fromDate'>
                                </div>
                                <div class="form-group">
                                    <label for="fromDate">Tentative Date of Release</label>
                                    <input id="tentativeReleaseDate" type=text date-picker
                                           placeholder='DD-MM-YYYY'
                                           dateformat='dd-mm-yy'
                                           maxlength="10"
                                           ng-required='true'
                                           class='form-control'
                                           ng-model='allocation.tentativeReleaseDate'>
                                </div>
                                <div class="form-group">
                                    <label for="emp_allocation_type">Allocation Type</label>
                                    <select id="emp_allocation_type" class="form-control custom-select"
                                            ng-model="allocation.emp_allocation_type" ng-options="l.value as l.label for l in emp_allocation_type" ng-change="checkBilling(allocation.emp_allocation_type)">
                                    </select>
                                </div>
                                <div class="form-group" ng-if="billingCondition"> 
                                    <label for="emp_allocation_type">Billing Type</label> 
                                    <select id="emp_allocation_type" class="form-control custom-select" ng-model="allocation.billing_type" ng-options="l.value as l.label for l in billing_type"> 
                                    </select> 
                                </div> 
                                <div class="form-group" ng-if="billingCondition"> 
                                    <label for="billing_rate"><i class="fas fa-rupee-sign"></i> Billing Rate</label> 
                                    <input ng-model="allocation.billing_rate" min="0" type="number" id="billing_rate" class="form-control" placeholder="Hourly Rate"> 
                                </div>
                                <div class="form-group">
                                    <label for="profile_id">Billing As Profile</label>
                                    <select ng-model="allocation.profile_id" class="form-control">
                                        <option value="0">--None--</option>
                                        <option ng-repeat="dec in forecastProfile" value="{{dec.id}}">
                                            {{dec.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#modal-default">Cancel</button>
                <button type="submit" ng-click="openHeroProjectModel(allocation)" class="btn btn-success float-right">
                    <i class="fas fa-save"></i>
                    Add Hero to Project
                </button> 
				<!-- <button type="submit" ng-if=" allocation.partialHours < 5 || allocation.partialHours == 5" ng-click="addAllocation()" class="btn btn-success float-right">
                    <i class="fas fa-save"></i>
                    Add Hero to Project
                </button> -->
				
            </div>
			
        </div>
    </section>
    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>Are you sure to leave this page!</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary btn-xs" data-dismiss="modal" ng-click="goToSelf('projectView',{'projectid':params.projectid})">Proceed</button>
                </div>
            </div>
        </div>
    </div>
	
		<script type="text/ng-template" id="HeroProject.html">
        <div class="">
            <div class="modal-header bg-gradient-gray-dark">
                <h4 class="modal-title" id="modal-title">Projects: <strong class="text-warning">{{data.hero.emp_first_name + ' ' + data.hero.emp_last_name}}</strong></h4>
            </div>
            <div class="modal-body" id="modal-body">
                <h4 class="text-center">Hero has {{data.total_hrs[0].remaining_hours}} free hours.</h4>     
                <div class="table table-responsive">
                    <table id="projectView" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>Project Name</th>
                            <th>Allocated Hours</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="row in allProjectsAllocation" ng-if="row.projectid != 116"> 
                            <td><a href="/projects/view/{{row.projectid}}" target="_blank"><i class="fas fa-external-link-square-alt"></i> {{row.proj_name}}</a></td>
                            <td>{{row.partialHours}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer bg-gradient-gray-dark">    
			    <button class="btn btn-primary" type="button" ng-click="cancel()">Ok, Understand</button>

                <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </script>
</div>
