<div class="content-wrapper" class="modal-demo">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>
                        <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="col-md-12">
            <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">
                            <p class="text-muted">{{project.proj_description}}</p>
                            <br>
                            <div class="text-muted">
                                <table>
                                    <tr>
                                        <td>Client</td>
                                        <td>&nbsp;</td>
                                        <td>Project Manager</td>
                                        <td>&nbsp;</td>
                                        <td>From</td>
                                        <td>&nbsp;</td>
                                        <td>Expected</td>
                                        <td>&nbsp;</td>
                                        <td>Status</td>
                                    </tr>
                                    <tr>
                                        <td><b ng-if="project.accountid" class="d-block nowrap badge bg-success">{{project.acc_company_name}}</b></td>
                                        <td>&nbsp;</td>
                                        <td><b ng-if="project.employeeid" class="d-block nowrap badge bg-success">{{project.emp_first_name+' '+project.emp_last_name}}</b></td>
                                        <td>&nbsp;</td>
                                        <td><span ng-if="project.proj_start_date" class="nowrap badge bg-success" ng-bind="formatDate(project.proj_start_date) | date:'dd MMM yyyy'"></span></td>
                                        <td>&nbsp;</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>
                                        <td>&nbsp;</td>
                                        <td><span class="nowrap badge badge-success">{{project.proj_status  | capitalize}}</span></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header border-transparent">
                            <h3 class="card-title">Hero List ({{heroes.length}})</h3>
                            <div class="card-tools">
                                <div class="btn-group">
                                    <button ng-click="open('md','modal-parent')" type="button" class="btn btn-warning"><i class="fas fa-plus"></i> Add Resource to this Project</button>
                                    <button ng-click="goTo($event,'projectList')" type="button" class="btn btn-success"><i class="fas fa-table"></i> View Project</button>
                                    <button ng-click="goTo($event,'heroList')" type="button" class="btn btn-info"><i class="fas fa-users"></i> View Hero</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-responsive">
                                <table id="projectView" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>
                                            <small>Name</small>
                                        </th>
                                        <th>
                                            <small>Manager</small>
                                        </th>
                                        <th>
                                            <small>Project Manager</small>
                                        </th>
                                        <th>
                                            <small>Allocated</small>
                                        </th>
                                        <th>
                                            <small>Pool</small>
                                        </th>
                                        <th>
                                            <small>From</small>
                                        </th>
                                        <th>
                                            <small>Actions</small>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="hero in heroes">
                                        <td>
                                            <div>{{hero.emp_nick_name+' (' + hero.emp_code+')'}}</div>
                                        </td>
                                        <td><span class="nowrap">{{hero.linemgr.emp_nick_name+' (' + hero.linemgr.emp_code+')'}}</span></td>
                                        <td><span class="nowrap">{{hero.projmgr.emp_nick_name+' (' + hero.projmgr.emp_code+')'}}</span></td>

                                        <td><span class="nowrap badge btn-success" ng-if="hero.partialHours>0">{{hoursToPercent(hero.partialHours)}}</span></td>
                                        <td><span class="nowrap badge btn-danger" ng-if="hero.emp_pool>0">{{hoursToPercent(hero.emp_pool)}}</span></td>

                                        <td><span class="nowrap" ng-bind="formatDate(hero.fromDate) | date:'dd MMM yyyy'"></span></td>

                                        <td>
                                            <div class="btn-group ">
                                                <a type="button" class="btn btn-default"><i class="fas fa-eye"></i> View</a>
                                                <button type="button" class="btn btn-default 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">
                                                    <a class="dropdown-item" href="#"><i class="fas fa-pen"></i> Edit</a>
                                                    <a class="dropdown-item" href="#"><i class="fas fa-list"></i> Add Skills</a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item" href="#"><i class="fas fa-table"></i> Add to Project</a>
                                                    <a class="dropdown-item" href="#"><i class="fas fa-meh-blank"></i> Move to Pool</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.table-responsive -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        $(function () {
            setTimeout(() => {
                //$("#employee").DataTable();
                $('#projectView').DataTable({
                    "paging": true,
                    "lengthChange": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "autoWidth": false,
                });
            }, 1000);

        });
    </script>

    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body" id="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <div class="modal-parent">
    </div>
</div>
