<div class="content-wrapper" ng-if="!myAccess.projectList">
    <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.projectList">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group row">
                        <div class="col-sm-3 offset-sm-4"><select data-toggle="tooltip" ng-change="selectChanged()" title="Select Account" id="account" class="form-control custom-select" ng-model="filter.selaccount" ng-options="a.accountid as a.name for a in filter.account"></select></div>
                        <div class="col-sm-3"><select ng-change="selectChanged()" data-toggle="tooltip" title="Project Status" id="viewType" class="form-control custom-select" ng-model="filter.selstatus" ng-options="p.val as p.val for p in filter.status"></select></div>
                    </div>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-success">
                        <go-back/>
                        <i class="fas fa-table"></i> Project List ({{projects.length}})
                    </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">Projects</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-success card-outline">
                        <div class="card-header border-transparent">
                            <h3 class="card-title">&nbsp;</h3>
                            <div class="card-tools">
                                <div class="btn-group">
                                    <button ng-click="goTo($event,'projectAdd')" type="button" class="btn btn-success"><i class="fas fa-plus"></i> <span class="d-none d-lg-inline-block">Create Project</span></button>
                                    <button ng-click="goTo($event,'heroList')" type="button" class="btn btn-warning"><i class="fas fa-users"></i> <span class="d-none d-lg-inline-block">View Heroes</span></button>
                                    <button type="button" title="Fullscreen Toggle" class="btn btn-dark toggle-fullscreen"><i class="fas fa-expand"></i></button>
                                    <button data-id="{{project.id}}" 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="projectList" class="table table-bordered table-striped table-sm">
                                    <thead>
                                    <tr>
                                        <th>Sno</th>
                                        <th>Company/Account</th>
                                        <th>Revenue Center</th>
                                        <th>Project Name</th>
                                        <th>Nauture Of Project</sth>
                                        <th>Last Allocation Verified Date/Verify Allocation</th>
                                        <th>From Date /<br/><span class="nowrap">Expected Date</span></th>
                                        <th>Project Manager</th>
                                        <th>Status</th>
                                        <!--<th>Effort</th>-->
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="project in projects track by $index" ng-class="{'table-success':project.proj_status==='delivered'}">
                                        <td>{{$index+1}}</td>
                                        <td>
                                            <span ng-if="project.accountid">
                                                <a class="nowrap" ng-href="{{baseurl+'/accounts/view/'+project.accountid}}">
                                                    <i class="fas fa-external-link-square-alt"></i> <strong>{{project.acc_company_name}}</strong>
                                                </a>
                                            </span>
                                        </td>
                                        <td>{{project.rc_name}}</td>
                                        <td><a class="nowrap" target="_blank" ng-href="{{baseurl+'/projects/view/'+project.projectid}}">
                                            <i class="fas fa-external-link-square-alt"></i> <strong>{{project.proj_name}}</strong>
                                        </a></td>
                                        <td><strong>{{project.proj_nature | capitalize}}</strong></td>
                                        <td>
                                            <span class="nowrap badge bg-green" ng-bind="formatDate(project.lastAllocationVerified) | date:'dd MMM yyyy'"></span>
                                            <button ng-if="myId==project.mngr_id" type="button" class="btn btn-success" ng-click="verifyAllocation(project.projectid)">Verify Allocation</button>
                                        </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 ng-if="project.emp_designation" />
                                            <span ng-if="project.emp_designation">{{project.emp_designation}}</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>
                                        <!--<td><span class="nowrap">{{project.proj_resource_requirement_perday}}</span></td>-->
                                        <td>
                                            <div class="btn-group nowrap">
                                                <a class="btn btn-success" href="/projects/view/{{project.projectid}}"><i class="fas fa-eye"></i> View</a>
                                                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                                                    <span class="caret"></span>
                                                    <span class="sr-only">Toggle Dropdown</span>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right" role="menu">
                                                    <button class="dropdown-item" ng-click="goToSelf('projectEdit',{projectid:project.projectid})"><i class="fas fa-pen"></i> Edit</button>
                                                    <div class="dropdown-divider"></div>
                                                    <!--<a class="dropdown-item" ng-href="{{baseurl+'/projects/effort/view/'+project.id}}"><i class="fas fa-user-circle"></i> View Resource</a>-->
                                                    <a class="dropdown-item" ng-href="{{baseurl+'/projects/hero/add/'+project.projectid}}"><i class="fas fa-user"></i> Add Hero</a>
                                                    <div class="dropdown-divider"></div>
                                                    <button class="dropdown-item" ng-click="openProjectStatusModel(project)"><i class="fas fa-pen"></i> Change Status</button>
                                                    <!--<div class="dropdown-divider"></div>-->
                                                    <!--<a class="dropdown-item" href="#" ng-click="inactive()"><i class="fas fa-toggle-off text-red"></i> Inactive</a>-->
                                                    <!--<a class="dropdown-item" href="#" ng-click="delivered()"><i class="fas fa-trash"></i> Delivered</a>-->
                                                    <!--<div class="dropdown-divider"></div>-->
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script type="text/ng-template" id="ProjectStatus.html">
        <div class="">
            <div class="modal-header bg-danger">
                <h4 class="modal-title" id="modal-title">Change project status of <strong>{{data.project.proj_name}}</strong></h4>
            </div>
            <div class="modal-body" id="modal-body">
                <p>Current project status: <strong>{{data.project.proj_status | capitalize}}</strong></p>
                <div class="form-group">
                    <label for="proj_status">Change status to:</label>
                    <select id="proj_status" class="form-control custom-select"
                            ng-model="data.project.status" ng-options="ps.value as ps.label for ps in data.projStatus">
                    </select>
                </div>
                <div class="form-group">
                    <label for="proj_status_change_comment">Reason of Status Change</label>
                    <textarea required="required" ng-model="data.project.change_comment" id="proj_status_change_comment" class="form-control" rows="2" placeholder="Reason of Status Change"></textarea>
                </div>
            </div>
            <div class="modal-footer bg-danger">
                <button ng-if="data.project.status == data.project.proj_status" class="btn btn-default" disabled type="button">Change</button>
                <button ng-if="data.project.status != data.project.proj_status" class="btn btn-default" type="button" ng-click="change(data)">Change</button>
                <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </script>
</div>
