<div class="content-wrapper" ng-if="!myAccess.heroAdd && !myAccess.heroEdit">
    <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" ng-if="myAccess.heroAdd || myAccess.heroEdit"> 
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-warning">
                        <go-back/>
                        <i class="fas fa-users "></i> {{btn.text}}
                    </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 active"><a ng-href="{{baseurl}}/heroes/list">Heroes</a></li>
                        <li class="breadcrumb-item active">{{btn.text}}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>


    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-warning card-outline">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12 col-lg-6">
                                <!-- <div class="form-group" ng-if="!params.employeeid"> -->
                                <div class="form-group">
                                    <label for="emp_code">Code (e.g. USA-1111)</label>
                                    <div class="input-group mb-3">
                                        <!-- <div class="input-group-prepend">
                                            <span class="input-group-text">E-</span>
                                        </div> -->
                                        <input ng-model="hero.emp_code" type="text" id="emp_code" class="form-control" placeholder="e.g. USA-1111">
                                    </div>
                                </div>
                                <!--<div class="form-group">
                                    <label for="emp_nick_name">Nick Name</label>
                                    <input ng-model="hero.emp_nick_name" type="text" id="emp_nick_name" class="form-control" placeholder="Nick Name">
                                </div>-->
                                <div class="form-group" >
                                    <label for="emp_revenue_center">Revenue Center</label>
                                    <select id="emp_revenue_center" class="form-control custom-select"
                                            ng-model="hero.emp_revenue_center" ng-options="rc.revenuecenterid as (rc.rc_name) for rc in revenueCenters">
                                    </select>
                                </div>
                                <div class="form-group" >
                                    <label for="emp_ag_id">Assessment Group</label>
                                    <select id="emp_ag_id" class="form-control custom-select"
                                            ng-model="hero.emp_ag_id" ng-options="ag.ag_id as (ag.ag_name) for ag in assessmentGroups">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="emp_first_name">First Name</label>
                                    <input ng-model="hero.emp_first_name" type="text" id="emp_first_name" class="form-control" placeholder="First Name">
                                </div>
                                <div class="form-group">
                                    <label for="emp_middle_name">Middle Name</label>
                                    <input ng-model="hero.emp_middle_name" type="text" id="emp_middle_name" class="form-control" placeholder="Middle Name">
                                </div>
                                <div class="form-group">
                                    <label for="emp_last_name">Last Name</label>
                                    <input ng-model="hero.emp_last_name" type="text" id="emp_last_name" class="form-control" placeholder="Last Name">
                                </div>
                                <div class="form-group">
                                    <label>Date of Joining</label>
                                    <input type="text" date-picker
                                           placeholder='Date of Joining(DD-MM-YYYY)'
                                           dateformat='dd-mm-yy'
                                           maxlength="10"
                                           ng-required='true'
                                           class='form-control'
                                           ng-model='hero.emp_doj'>
                                </div>
                                <div class="form-group">
                                    <label>Date of Birth</label>
                                    <input type="text"  date-picker
                                           placeholder='Date of Birth(DD-MM-YYYY)'
                                           dateformat='dd-mm-yy'
                                           maxlength="10"
                                           ng-required='true'
                                           class='form-control'
                                           ng-model='hero.emp_dob'>
                                           <!-- <input data-toggle="tooltip" 
                                           title="Date of Birth" type="text" 
                                           placeholder='Date of Birth(DD-MM-YYYY)' 
                                           dateformat='dd-mm-yy' maxlength="50" ng-required='true' class='form-control dob-date-picker' 
                                           ng-model='hero.emp_dob'/> -->
                                </div>
                                <div class="form-group">
                                    <label for="emp_location">Location</label>
                                    <select id="emp_location" class="form-control custom-select"
                                            ng-model="hero.emp_location" ng-options="l.value as l.label for l in locationOptions">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="emp_location">Country</label>
                                    <select id="emp_location" class="form-control custom-select"
                                            ng-model="hero.emp_country" ng-options="l.id as l.country_name for l in countryList" required>
                                    </select>
                                </div>
				<div class="form-group">
                                    <label for="workingtz">Working Timezone</label>
                                   <select id="workingtz" class="form-control custom-select"
                                            ng-model="hero.workingtz" ng-options="l.countrytz as l.countrytz for l in countryList" required>
				  </select>
				</div>
                                <div class="form-group">
                                    <label for="emp_email">Email</label>
                                    <input ng-model="hero.emp_email" type="email" id="emp_email" class="form-control" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <label for="emp_mobile">Mobile</label>
                                    <input ng-model="hero.emp_mobile" type="tel" maxlength="17" pattern="^[0-9()+ -]*$" id="emp_mobile" class="form-control" placeholder="Mobile">
                                </div>
                                <div class="form-group">
                                    <label>Marital Status</label>
                                    <div class="form-group">
                                        <div class="form-check">
                                            <input id="Single" ng-model="hero.emp_marital_status" class="form-check-input" type="radio" value="Single">
                                            <label for="Single" class="form-check-label">Single</label>
                                        </div>
                                        <div class="form-check">
                                            <input id="Married" ng-model="hero.emp_marital_status" class="form-check-input" type="radio" value="Married">
                                            <label for="Married" class="form-check-label">Married</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Gender</label>
                                    <div class="form-group">
                                        <div class="form-check">
                                            <input id="Male" ng-model="hero.emp_gender" class="form-check-input" type="radio" value="Male">
                                            <label for="Male" class="form-check-label">Male</label>
                                        </div>
                                        <div class="form-check">
                                            <input id="Female" ng-model="hero.emp_gender" class="form-check-input" type="radio" value="Female">
                                            <label for="Female" class="form-check-label">Female</label>
                                        </div>
                                        <div class="form-check">
                                            <input id="fluid" ng-model="hero.emp_gender" class="form-check-input" type="radio" value="Gender Fluid">
                                            <label for="fluid" class="form-check-label">Gender Fluid</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12 col-lg-6">
                                <div class="form-group">
                                    <label for="emp_skype">Skype id</label>
                                    <input ng-model="hero.emp_skype" type="text" id="emp_skype" class="form-control" placeholder="Skype">
                                </div>
                                <div class="form-group">
                                    <label for="emp_yoe">Total Years of Experience</label>
                                    <input ng-model="hero.emp_yoe" type="number" min="0" max="60" id="emp_yoe" class="form-control" placeholder="Years of Experience">
                                </div>
                                <div class="form-group">
                                    <label for="emp_relevant_yoe">Relevant Years of Experience</label>
                                    <input ng-model="hero.emp_relevant_yoe" type="number" min="0" max="60" id="emp_relevant_yoe" class="form-control" placeholder="Relevant Years of Experience">
                                </div>
                                <div class="form-group">
                                    <label for="emp_lm">Manager</label>
                                    <select id="emp_lm" class="form-control custom-select"
                                            ng-model="hero.emp_lm" ng-options="l.employeeid as (l.emp_first_name+' '+l.emp_last_name) for l in managerOptions">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="emp_tag">Tagged With</label>
                                    <select id="emp_tag" class="form-control custom-select"
                                            ng-model="hero.emp_tag" ng-options="l.employeeid as (l.emp_first_name+' '+l.emp_last_name) for l in managerOptions">
                                    </select>
                                </div>
                                <!--<div class="form-group">
                                    <label for="emp_pm">Project Manager</label>
                                    <select id="emp_pm" class="form-control custom-select"
                                            ng-model="hero.emp_pm" ng-options="l.employeeid as (l.emp_first_name+' '+l.emp_last_name) for l in managerOptions">
                                    </select>
                                </div>-->
                                <div class="form-group">
                                    <label for="emp_designation">Designation</label>
                                    <select id="emp_designation" class="form-control custom-select"
                                            ng-model="hero.emp_designation" ng-options="ps.id as ps.desg_name for ps in designationOptions">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="emp_department">Department</label>
                                    <select id="emp_department" class="form-control custom-select"
                                            ng-model="hero.emp_dept" ng-options="ps.id as ps.dept_name for ps in departmentOptions">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="proj_status">Status</label>
                                    <select id="proj_status" class="form-control custom-select"
                                            ng-model="hero.emp_status" ng-options="ps.value as ps.label for ps in gstatus">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="proj_status">Skills</label>
                                    <tags-input id="emp_skills" ng-model="selectSkills" placeholder="Add a skills"
                                                replace-spaces-with-dashes="false"
                                                add-from-autocomplete-only="true"
                                                on-tag-added="tagAdded($tag)"
                                                on-tag-removed="tagRemoved($tag)"
                                                >
                                        <auto-complete source="loadSkills($query)" min-length="0" debounce-delay="0" max-results-to-show="30"></auto-complete>
                                    </tags-input>
                                </div>
                                <div class="form-group">
                                    <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
                                        <input type="checkbox" ng-model="hero.is_admin" class="custom-control-input" id="customSwitch1">
                                        <label class="custom-control-label no-select pointer" for="customSwitch1">Make Manager</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
                                        <input type="checkbox" ng-model="hero.is_admin_am" class="custom-control-input" id="customSwitch11">
                                        <label class="custom-control-label no-select pointer" for="customSwitch11">Assessment Manager</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="emp_batch_code">Batch Code</label>
                                    <input ng-model="hero.emp_batch_code" type="text" id="emp_batch_code" class="form-control" placeholder="Batch Code">
                                </div>
				<div class="form-group">
                                    <label for="emp_allocation_hours">Allocation Hours</label>
                                    <input ng-model="hero.emp_allocation_hours" type="text" id="emp_allocation_hours" class="form-control" placeholder="Allocation Hours">
                                </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-if="hero.emp_revenue_center==17" ng-click="openHeroProjectModel(hero)"  class="btn btn-success float-right btn-xs">
                    <i class="fas fa-save"></i>
                    {{btn.text}}
                </button>
				<!--  -->
				<button type="submit" ng-disabled="!isAllowToEditLocation && btn.text !='Add Hero'"  ng-if="hero.emp_revenue_center!=17"  ng-click="addHero()" class="btn btn-success float-right btn-xs">
                    <i class="fas fa-save"></i>
                    {{btn.text}}
                </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="goTo($event,'heroList')">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">Edit Hero: <strong class="text-warning">{{data.hero.emp_first_name + ' ' + data.hero.emp_last_name}}</strong></h4>
            </div>
            <div class="modal-body" id="modal-body">
                <h6 ng-if="!data.projects">Currently, No project assign to <strong class="text-gray-dark">{{data.hero.emp_first_name + ' ' + data.hero.emp_last_name}}</strong>, so click on 'Proceed to Delete' to delete Hero from Management Tool.</h6>
                <h6 ng-if="data.projects.length > 0">Project List</h6>
                <ol ng-if="data.projects.length > 0">
                    <li ng-repeat="p in data.projects" ng-if="p.projectid!=116">{{p.proj_name + ' of ' + p.acc_company_name}}</li>
                </ol>
                <p ng-if="data.projects.length > 0"><strong><i class="fas fa-exclamation-circle"></i> Please remove all the allocated projects first.</strong></p>        
            </div>
            <div class="modal-footer bg-gradient-gray-dark">    
                <button class="btn btn-primary" type="button" ng-click="cancel()">OK</button>
            </div>
        </div>
    </script>
</div>
