<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-purple">
                        <go-back/>
                        <i class="fas fa-table"></i> Assign project to <cite>"{{hero.emp_first_name+' '+hero.emp_last_name}}"</cite>
                    </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="#" ng-click="goToSelf('heroList')">Hero</a></li>
                        <li class="breadcrumb-item active">View</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-6">
                <div class="card card-outline card-success">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <label >Project:</label>
                                    <!--<select ui-select2 id="project" class="form-control custom-select"
                                            ng-model="allocation.proj_id"
                                            ng-change="projectChange(allocation.proj_id)"
                                            ng-options="l.projectid as l.proj_name for l in projects">
                                    </select>-->

                                    <ui-select on-select="projectChange($model)" ng-model="allocation.proj_id" theme="bootstrap" title="Select a Project" style="width: 100%">
                                        <ui-select-match placeholder="Select or search a project in the list...">{{$select.selected.proj_name}}</ui-select-match>
                                        <ui-select-choices repeat="project.projectid as project in projects | filter: $select.search">
                                            <span ng-bind-html="project.proj_name | highlight: $select.search"></span>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                                <div class="form-group" ng-if="allocation.proj_id">
                                    <label >Project Details:</label>
                                    <div class="table-responsive">
                                    <table class="table table-bordered table-striped table-sm">
                                        <tr><th>Project Name</th><td>{{selProject[0].proj_name}}</td></tr>
                                        <tr><th>Project Start Date</th><td>{{selProject[0].proj_start_date}}</td></tr>
                                        <tr><th>Company </th><td>{{selProject[0].acc_company_name}}</td></tr>
                                        <!--<tr><th>Contact Person</th><td>{{selProject[0].acc_first_name +' '+ selProject[0].acc_last_name}}</td></tr>-->
                                        <!--<tr><th>Contact Info</th><td>{{selProject[0].acc_email +' '+ selProject[0].acc_primany_contact}}</td></tr>-->
                                        <tr><th>Project Manager</th><td>{{selProject[0].emp_first_name +' '+ selProject[0].emp_last_name}}</td></tr>
                                        <tr><th>Manager Info</th><td>{{selProject[0].emp_email +' '+ selProject[0].emp_mobile}}</td></tr>
                                    </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card card-outline card-success">
                    <div class="card-body">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label >Hero:</label>
                                <input type="text" class="form-control disabled" disabled  ng-value="hero.emp_first_name+' '+hero.emp_last_name">
                            </div>
                            <div class="form-group">
                                <label for="willActAs">Will act as</label>
                                <select id="willActAs" class="form-control custom-select"
                                        ng-model="allocation.willActAs" ng-options="ps.id as ps.desg_name for ps in designationOptions">
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="line_mngr_id">Manager</label>
                                <select id="line_mngr_id" class="form-control custom-select"
                                        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">Billing 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">
                                <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 === 0 ? allocation.billableHours + 1 : 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>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal-default">Cancel</button>
                <button type="submit" ng-click="addAllocation()" class="btn btn-success float-right"> <i class="fas fa-save"></i> Assign project to {{hero.emp_first_name+' '+hero.emp_last_name}}</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" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="goToSelf('projectView',{projectid:allocation.proj_id})">Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>
