<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="text-olive">
                        <go-back/>
                        <i class="fas fa-book"></i> {{createButton.heading}}
                    </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 href="#">Project Diary</a></li>
                        <li class="breadcrumb-item active">{{createButton.heading}}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <button type="button" class="btn bg-olive float-right btn-xs" data-toggle="modal" data-target="#modal-default">View Diary <i class="fas fa-arrow-right"></i></button>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card card-primary card-outline" ng-repeat="diary in diaries">
                    <div class="card-header">Project: <strong class="text-blue"> {{diary.proj_name}} </strong></div>
                    <div class="card-body">
                        <div class="col-md-4 offset-md-4 mt-1" ng-repeat="d in diary.data">
                            <div class="form-group">
                                <label>Date*</label>
                                <input type=text date-picker
                                       placeholder='Date (DD-MM-YYYY)'
                                       dateformat='dd-mm-yy'
                                       maxlength="10"
                                       ng-required='true'
                                       class='form-control'
                                       ng-model='d.pd_date'/></div>
                            <div class="form-group">
                                <label for="pd_project_status{{$parent.$index}}{{$index}}">Project Status*</label>
                                <select id="pd_project_status{{$parent.$index}}{{$index}}" required class="form-control custom-select"
                                        ng-model="d.pd_project_status" ng-options="ps.value as ps.label for ps in pd_project_status_options">
                                </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="d.pd_is_escalation" class="custom-control-input" id="pd_is_escalation{{$parent.$index}}{{$index}}">
                                    <label class="custom-control-label no-select pointer" for="pd_is_escalation{{$parent.$index}}{{$index}}">Any Current Escalation</label>
                                </div>
                            </div>
                            <div class="form-group" ng-if="d.pd_is_escalation===true"><label>Provide Brief on Issue</label><textarea class="form-control" ng-model="d.pd_issue_brief" placeholder="Provide Brief on Issue" rows="2" maxlength="1000"></textarea></div>
                            <div class="form-group">
                                <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
                                    <input type="checkbox" ng-model="d.pd_is_challange" class="custom-control-input" id="pd_is_challange{{$parent.$index}}{{$index}}">
                                    <label class="custom-control-label no-select pointer" for="pd_is_challange{{$parent.$index}}{{$index}}">Any Current Challenge</label>
                                </div>
                            </div>
                            <div class="form-group" ng-if="d.pd_is_challange===true"><label>Plan to handle Escalation/Challenge/Comments</label><textarea class="form-control" ng-model="d.pd_handling_plan" placeholder="Plan to handle Escalation/Challenge/Comments" rows="2" maxlength="500"></textarea></div>
                            <div class="form-group">
                                <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
                                    <input type="checkbox" ng-model="d.pd_is_extra_hours" class="custom-control-input" id="pd_is_extra_hours{{$parent.$index}}{{$index}}">
                                    <label class="custom-control-label no-select pointer" for="pd_is_extra_hours{{$parent.$index}}{{$index}}">Putting extra hours in weekend</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-success float-right" ng-click="removeSelf($parent.$parent.$index,$index)" ng-if="$index > 0"><i class="fas fa-trash"></i></button>
                            </div>
                        </div>
                        <button class="btn btn-success mt-1 float-right" ng-click="addMore($index,diary)"><i class="fas fa-plus"></i></button>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <button type="button" class="btn btn-secondary btn-xs" data-toggle="modal" data-target="#modal-default">Cancel</button>
                <button type="submit" ng-click="Save()" class="btn btn-success float-right btn-xs">
                    <i class="fas {{createButton.icon}}"></i> {{createButton.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="goToSelf('projectDiaryList')">Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>
