<div id="punchinissues">
    <form class="content fix-ion-scroll" id="formPunchInIssue" name="formPunchInIssue" ng-submit="validateForm(formPunchInIssue,'inIssue')" novalidate="">
    <div>
        <div class="list-row-1">
                <div class="bg-lightblue-2 rounded-10 pdTB10 mgT20 mgB5 mgLR5">
                    <div class="itm-row pdT5 pdLR10 mgB20">
                        <label class="label-field-4 mgB5">
                            Type
                        </label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-field-2">
                                    <input class="h39px bold" id="type" ng-class="{ 'has-errors' : formPunchInIssue.type.$invalid  }"
                                     placeholder="Select item" type="text" value="{{dataPunchInIssues.type}}">
                                        <div class="sign-r clear">
                                            <button class="bg-transparent h30px right pdR10">
                                                <svg class="h18px mgB10" style="enable-background:new 0 0 63.215 63.215;" version="1.1" viewbox="0 0 63.215 63.215" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"> <g> <g> <path d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" fill="#034274"> </path> </g> </g> </svg>
                                            </button>
                                        </div>
                                        <select class="field-overlay" ng-model="dataPunchInIssues.type" ng-change="typeIssueChange(dataPunchInIssues.type)" required name="type">
                                            <option value="">Select Type</option>
                                            <option value="Was request to">Was Requested to</option>
                                            <option value="Tardy">Tardy</option>
                                            <option value="Forgot to punch in/out">Forgot to punch in/out</option>
                                            <option value="Approved time off">Approved time off</option>
                                            <option value="Other">Other</option>
                                        </select>
                                    </input>
                                </div>
                            </div>
                        </div>
                    </div>
                     <div class="separator-b-2 lightpink circle-right mgLR10 mgB10">
                    </div>
                    <div class="itm-row pdT5 pdLR10 mgB20" ng-if="showByWhom">
                        <label class="label-field-4 mgB5">
                            By Whom
                        </label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-field-2">
                                    <input class="h39px bold" id="byWhom" ng-class="{ 'has-errors' : formPunchInIssue.byWhom.$invalid  }"
                                     placeholder="Select item" type="text" value="{{dataPunchInIssues.other}}">
                                        <div class="sign-r clear">
                                            <button class="bg-transparent h30px right pdR10">
                                                <svg class="h18px mgB10" style="enable-background:new 0 0 63.215 63.215;" version="1.1" viewbox="0 0 63.215 63.215" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"> <g> <g> <path d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" fill="#034274"> </path> </g> </g> </svg>
                                            </button>
                                        </div>
                                        <select class="field-overlay" ng-model="dataPunchInIssues.byWhom" ng-change="changePerson(dataPunchInIssues.byWhom)" required name="byWhom">
                                            <option ng-repeat="item in adminAndManager" value="{{item.name}}">{{item.name}}</option>
                                        </select>
                                    </input>
                                </div>
                            </div>
                        </div>
                    </div>
                     
                    <div class="separator-b-2 lightpink circle-right mgLR10 mgB10" ng-if="showByWhom">
                    </div>
                    <div class="itm-row pdT5 pdLR10 mgB20" ng-if="showOtherEdit">
                        <label class="label-field-4 mgB5">
                           {{labelVal}}
                        </label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-field-2">
                                    <input type="text" ng-model="dataPunchInIssues.other" required="" value="" name="other" id="other"
                                    class="h39px bold" ng-class="{ 'has-errors' : formPunchInIssue.other.$invalid  }">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="separator-b-2 lightpink circle-right mgLR10 mgB10" ng-if="showOtherEdit">
                    </div>
                    <div class="itm-row pdT5 pdLR10 mgB20" ng-if="timePickerShowEdit">
                        <label class="label-field-4 mgB5">
                            Time
                        </label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-field-2">
                                    <input class="h39px bold" id="time"  name="time_input" ng-class="{ 'has-errors' : formPunchInIssue.time.$invalid  }"  placeholder="hh:mm am"  type="text" value="{{dataPunchInIssues.time| date: 'hh:mma'}}">
                                        <div class="sign-r clear">
                                            <button class="bg-transparent h39px right pdR8">
                                                <svg class="h24px" style="enable-background:new 0 0 59 59;" version="1.1" viewbox="0 0 59 59" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"> <rect height="47" style="fill:#2C9AB9;" width="58" x="0.5" y="12"> </rect> <g> <circle cx="22.5" cy="28" r="1" style="fill:#FFF;"> </circle> <circle cx="29.5" cy="28" r="1" style="fill:#FFF;"> </circle> <circle cx="36.5" cy="28" r="1" style="fill:#FFF;"> </circle> <circle cx="43.5" cy="28" r="1" style="fill:#FFF;"> </circle> <circle cx="50.5" cy="28" r="1" style="fill:#FFF;"> </circle> <circle cx="8.5" cy="36" r="1" style="fill:#FFF;"> </circle> <circle cx="15.5" cy="36" r="1" style="fill:#FFF;"> </circle> <circle cx="8.5" cy="28" r="1" style="fill:#FFF;"> </circle> <circle cx="15.5" cy="28" r="1" style="fill:#FFF;"> </circle> <circle cx="22.5" cy="36" r="1" style="fill:#FFF;"> </circle> <circle cx="29.5" cy="36" r="1" style="fill:#FFF;"> </circle> <circle cx="36.5" cy="36" r="1" style="fill:#FFF;"> </circle> <circle cx="43.5" cy="36" r="1" style="fill:#FFF;"> </circle> <circle cx="50.5" cy="36" r="1" style="fill:#FFF;"> </circle> <circle cx="8.5" cy="43" r="1" style="fill:#FFF;"> </circle> <circle cx="15.5" cy="43" r="1" style="fill:#FFF;"> </circle> <circle cx="22.5" cy="43" r="1" style="fill:#FFF;"> </circle> <circle cx="29.5" cy="43" r="1" style="fill:#FFF;"> </circle> <circle cx="36.5" cy="43" r="1" style="fill:#FFF;"> </circle> <circle cx="43.5" cy="43" r="1" style="fill:#FFF;"> </circle> <circle cx="50.5" cy="43" r="1" style="fill:#FFF;"> </circle> <circle cx="43.5" cy="51" r="1" style="fill:#FFF;"> </circle> <circle cx="50.5" cy="51" r="1" style="fill:#FFF;"> </circle> <circle cx="8.5" cy="51" r="1" style="fill:#FFF;"> </circle> <circle cx="15.5" cy="51" r="1" style="fill:#FFF;"> </circle> <circle cx="22.5" cy="51" r="1" style="fill:#FFF;"> </circle> <circle cx="29.5" cy="51" r="1" style="fill:#FFF;"> </circle> <circle cx="36.5" cy="51" r="1" style="fill:#FFF;"> </circle> </g> <rect height="7" style="fill:#016A87;" width="58" x="0.5" y="12"> </rect> </svg>
                                            </button>
                                        </div>
                                        <div class="field-overlay datetime" time am-pm id="" ion-datetime-picker="" name="time" ng-model="dataPunchInIssues.time" required>
                                            {{dataPunchInIssues.time| date: 'hh:mma'}}
                                        </div>
                                    </input>
                                </div>
                            </div>
                        </div>
                    </div>             
                </div>     
        </div>
        <div class="popup-buttons" >
           
            <button class="button ng-binding button-default" ng-class="button.type || 'button-default'" type="submit">
                Add
            </button>
           
            <button class="button ng-binding button-default" ng-class="button.type || 'button-default'" type="button" ng-click="closeIonicPopup()">
                Cancel
            </button>
            
        </div>
    </div>
</form>
</div>