<div class="content-wrapper" ng-if="gUser.emp_first_name === 'Admin'">
    <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-danger alert-dismissible">
                    <h5><i class="icon fas fa-ban"></i> Alert!</h5>
                    Please login as Hero.
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .highlight a{
        background-color: #c82333 !important;
        color: #ffffff !important;
    }
</style>
<div class="content-wrapper" ng-if="gUser.emp_first_name !== 'Admin'">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-3">
                    <h1 class="text-olive">
                        <go-back/>
                        <i class="fas fa-book"></i> {{createButton.heading}}
                    </h1>
		
                </div>
		<div class="col-sm-6 bg-warning" style="text-align:center;">
			<h4 class="">You have to fill diary between {{gUser.shift_hours}} hours.</h4>
		</div>
                <div class="col-sm-3">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a ng-href="{{baseurl}}/dashboard">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{baseurl}}/my-diary/list">My 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="col-sm-12 p-5 bg-white" ng-if="diaries.length <= 0">
            <h4 class="text-center">Currently, you are not assigned to any active project at the moment.<br>
                    <!-- Please log your hours under the <br>"R&D, POC, Project Co-ordinations, Self Study, Training, Helping Others, etc..." <br>project from "My Diary." -->
            </h4>
        </div>

        <div class="row mb-2">
            <div class="col-sm-12">
                <button type="button" class="btn bg-olive float-right" data-toggle="modal" data-target="#modal-view_diary">View Diary</i></button>
                 <a class="btn bg-warning float-right" href="/heroes/heroesUploadFile/{{heroId}}"> Upload File</a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="card card-primary card-outline" ng-repeat="diary in diaries track by $index" ng-init="parent=$index">
                    <div class="card-header">Project: <strong class="text-blue"> {{diary.proj_name}} </strong><strong>(Last Filled on :<span class="nowrap" ng-bind="formatDate(diary.last_filled_date) | date:'dd MMM yyyy'"></span>)</strong></div>
                    <div class="card-body">
                        <div class="row mt-1" ng-repeat="d in diary.data">
 				<div class="col-sm-1">
				<label>Timezone* </label>
                                <select class="form-control custom-select" ng-model="d.diarytz">
                                     <option value="Asia/Kolkata">India</option>
                		     <option value="America/Phoenix">USA</option>
                		     <option value="Australia/Melbourne">AUS</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <label>Date* </label>
                                <input type=text date-picker
                                       placeholder='Date (DD-MM-YYYY)'
                                       dateformat='dd-mm-yy'
                                       maxlength="10"
                                       min-date="{{d.lastLockedDate}}"
                                       max-date="{{monthEnd}}"
                                       ng-required='true'
                                       class='form-control'
                                       beforeshowdate="{{restrictLeaves}}"
                                       readonly="true"
                                       ng-model='d.date'/></div>
                            <div class="col-sm-2">
                                <label for="willActAs">Category </label>
                                <select id="willActAs" class="form-control custom-select" ng-change="changeCat(parent,$index)"
                                        ng-model="d.logtype" ng-options="lt.mydiarylogtypeid as lt.lt_name | titlecase for lt in logTypes">
                                </select>
                                <!-- <select id="willActAs" class="form-control custom-select" 
                                ng-model="d.logtype" ng-change="selectedCategory(d.date,d.logtype)"> 
                               <option ng-if="getDateAndCategory(lt.mydiarylogtypeid,d.date)" ng-repeat="lt in logTypes " value="{{lt.mydiarylogtypeid}}" > {{lt.lt_name}} </option> 
                            </select> -->
                            </div>
                            <div class="col-sm-4"><label>Work Area/Description*</label><textarea class="form-control" required ng-model="d.description" placeholder="Description" rows="2" maxlength="1000"></textarea></div>
                            <div class="col-sm-1"><label>Hours*</label><input class="form-control" ng-disabled="d.logtype=='16' || d.logtype=='17' || d.logtype=='22' || d.logtype=='23'" ng-model="d.hours" required type="number" placeholder="Hours" min="0.0" step="0.25" max="24"></div>
                            <div class="col-sm-1"><label>Ref #</label><input class="form-control" ng-model="d.reference" type="text" placeholder="Ref # (If available)" maxlength="100"></div>
                            <!--<div class="col-sm-2"><textarea class="form-control" ng-model="d.comments" placeholder="Comment/Notes" rows="2" maxlength="500"></textarea></div>-->
                            <div class="col-sm-1">
                                <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>
                        <div class="float-right right">
                            <button type="submit" ng-click="Save()" class="btn btn-success" >
                                <i class="fas {{createButton.icon}}"></i> {{createButton.text}}
                            </button>
                            <button class="btn btn-success mt-1" ng-click="addMore($index,diary)"><i class="fas fa-plus"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12" ng-if="diaries.length > 0">
                <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal-cancel">Cancel</button>
                <button type="submit" ng-click="Save()" class="btn btn-success float-right">
                    <i class="fas {{createButton.icon}}"></i> {{createButton.text}}
                </button>
            </div>
        </div>
    </section>
    <div class="modal fade" id="modal-view_diary">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>You are being redirected to View Diary 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('myDiaryList')">Proceed</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-cancel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>Please Note: No data would be saved and you will be redirected to View Diary Page.</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="goToSelf('myDiaryList')">Proceed</button>
                </div>
            </div>
        </div>
    </div>
</div>
