@extends('hr::layouts.master')
@section('content')
<script src="{{ asset('/js/hr/controller/empModules.js')}}"></script>
<script src="{{ asset('/js/hr/controller/badgeController.js')}}"></script>
<script src="{{ asset('/js/hr/controller/employeeController.js')}}"></script>

<div  ng-app="badgeApp">

    <!--displaying index-->
    <div ng-controller="badgeCtrl" ng-init="badgePagingInit()">
        <div class="col s12">
            <div class="card">
                <h1 class="page-title">Badges
                <div class="right">    
                        <a href="#modal_createBadge" ng-click="clearTaxMaster()" class="tooltipped" data-position="top" data-delay="50"  data-tooltip="Create New Badge"><i class="fa fa-plus"></i></a>
                    </div></h1>
                <a href="#!" ng-click="GoBack()" class="waves-effect page-button"><i class="material-icons left">arrow_back</i>Back</a>
            </div>
        </div>
     

        <!--Hidden Variable for creating Badge -->
        <input type="hidden" id='data-badges' value="{{$badges or '[]'}}"/>
        <input type="hidden" id='data-teams' value="{{$teams or '[]'}}"/>
        <!--hidden variable-->
 <div class="col s12 m12 l12"> 
        <div ng-show="badges.data == 0">
            <div ng-show="badges.data == 0" class="col s12 card">
                <div class="no-data">   
                    <i class="no-data-img"></i>
                    <p>No results found</p>
                </div>
            </div>
        </div>

        <div ng-hide="badges.data == 0">
            <br>
        <div class="right-align but-mar">

            <!--Pagination starts here-->
            <ul class="pagination" ng-if="1 < pages.length || !autoHide">
                <li  ng-disabled="pagingData.current_page == 1">
                    <a href="" ng-click="pagingData.current_page == 1 || setCurrentBadgePage(1)">&laquo;</a>
                </li>
                <li  ng-disabled="pagingData.current_page == 1">
                    <a href="" ng-click="pagingData.current_page == 1 || setCurrentBadgePage(pagingData.current_page - 1)">&lsaquo;</a>
                </li>
                <li ng-repeat="pageNumber in pages track by  $index" ng-class="{ active :pagingData.current_page == pageNumber, disabled : pageNumber == '...' }">
                    <a href="" ng-click="setCurrentBadgePage(pageNumber)">@{{ pageNumber}}</a>
                </li>

                <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                    <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentBadgePage(pagingData.current_page + 1)">&rsaquo;</a>
                </li>
                <li  ng-disabled="pagingData.current_page == pagingData.last_page">
                    <a href="" ng-click="pagingData.current_page == pagingData.last_page || setCurrentBadgePage(pagingData.last_page)">&raquo;</a>
                </li>
            </ul>
 </div>
            <!--Pagination ends here-->

            <!--tiles start here-->
            <div class="col s3  " ng-repeat="badge in badges.data|  filter:searchBadge">  
                <div class="small-box bg-white card" style="padding-top: 5px;padding-right: 5px;padding-bottom: 5px;padding-left: 5px;">
                    <div class="inner">    
                        <b>Badge : @{{badge.name}}</b><br>
                        <p>Description : @{{badge.description}} </p>               
                    </div> 
                    <div class="icon">
                        <img id="imagesource" ng-src="@{{badge.thump}}" width="50" height="50">
                    </div>
                    <div style="background: lightgoldenrodyellow"><br>
                        <center>Monthly limit : @{{badge.monthlylimit}}</center><br> 
                        <div style="float: right">
                            <a href="#!" ng-click="editBadge(badge.id, $index)"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
                            <a href="#!" ng-click="showDeleteModal(badge.id, $index)" ><i class="fa fa-trash-o fa-fw"></i>Delete</a></li>
                        </div><br><br>
                    </div>
                </div>  
            </div>
        </div>
        <!--dispay ends here-->
    </div>
        <!-- Modal Structure -->
    <div id="modal_createBadge" class="modal modal-fixed-footer" data-modalfire>
        <div class="modal-content">
            <h4>Create Badge</h4>                
            <div class="row">
                <form class="col s12 custom-form" id="frmBadge" >
                    <div class="row">
                        <div class="input-field mandatory col s12">
                            <p>Name</p>
                            <input id="txtname" type="text" name="txtname" ng-class="initialclass" ng-model="txtname" required data-vtype="name" placeholder="Badge Name">                                
                             <span class="error-msg"></span> 
                        </div>
                        <div class="input-field mandatory col s12">
                            <p>Description</p>
                            <input id="txtdescription" type="text" ng-class="initialclass" name="txtdescription" ng-model="txtdescription" required data-vtype="text">                                
                            <span class="error-msg"></span>
                        </div>
                        <div class="input-field mandatory col s12">
                            <p>Monthly Limit</p>
                            <input id="txtmonthlylimit" type="text" ng-class="initialclass" name="txtmonthlylimit" ng-model="txtmonthlylimit" required data-vtype="number">                                
                           <span class="error-msg"></span> 
                        </div>
                        <div class="input-field mandatory col s12">
                            <p>Expiry Type</p>
                            <select class="browser-default" id="drpexptype" name="drpexptype" ng-init="drpexptype='MONTHLY'" ng-model="drpexptype" data-select required>
                                <option value="MONTHLY">Monthly</option>
                                <option value="YEARLY">yearly</option>
                            </select>                                
                        </div>
                        <div class="input-field mandatory col s12">
                            <p>Type</p>
                            <select class="browser-default" id="drptype" name="drptype" ng-model="drptype" ng-init="drptype='EVERYONE'" ng-change="selectChip()" data-select required>
                                <option value="EVERYONE">Everyone</option>
                                <option value="SELECTED TEAMS">Selected teams</option>
                            </select>                                
                        </div>
                        
                        <div class="input-field mandatory col s12" ng-show="drptype ==='SELECTED TEAMS'">
                            
                            <!--using select2-->
                            <select multiple="multiple" name="drpteam[]" id="chipAuto" ng-model="chipAuto" data-select required>
                                <option ng-repeat="team in teams.data" value="@{{team.id}}">@{{team.team}}</option>
                            </select>
                            <!--select2 ends here-->
                       
                       </div>
                        
                        <div class="input-field col s12">
                            <label for="txtdocId">Document</label><br><br><br>
                            <input id="txtdocId" type="file" name="txtdocId" ng-model="txtdocId" onchange="angular.element(this).scope().selectedorNot()" required >   
                            <span class="error-msg"></span> 
                        </div>
                        <input type="hidden" value="" id="badgeId" name='badgeId' ng-model="badgeId"/>
                        <div class="input-field col s12" >
                            
                            <img id="imagesource" ng-show="imagesource" ng-src="@{{imagesource}}" ng-model="imagesource" width="220" height="140">
                            
                        </div>
                         
                    </div>

            </form>
        </div>
    </div>
    <div class="modal-footer">    
        <a href="#!" ng-click="saveBadge($event)" class="waves-effect waves-light btn">Create</a>
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</a>
    </div>
</div>
<!-- Modal Structure -->
<div id="modal-delete-badge" class="modal modal-fixed-footer" data-modalfire>
    <div class="modal-content">
        <h4>Do you want delete this item(s) ?</h4>
    </div>
    <div class="modal-footer">
        <a href="#!" ng-click="deleteItem()" class="modal-action waves-effect waves-red btn-flat ">Yes</a>
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">No</a>
    </div>
</div>
</div>                
@stop