@extends('layouts.app')
@section('style')
    <link href="{{url('css/custome-table.css')}}" rel="stylesheet" type="text/css">
    <style type="text/css">

.checkbox {
      width: 46px;
      height: 46px;
    }

/*.checkbox.checkbox-lg{ 
  width: 46px;
  height: 46px;
  padding-left: 4px;
  font-size: 36px;
  left: 1px;
  top: -31px;
}*/

    </style>

@stop
@section('content')
@include('inventories.cmodal')  

    <div class="row">

        <div class="portlet light bg-inverse" style="min-height: 100%;">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-equalizer font-green-haze"></i>&nbsp;
                    <span class="caption-subject font-green-haze bold uppercase"> @lang('layout.CreateAttendance') </span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="tools">
                    
                </div>
               
            </div>
            <div id="attendance" class="portlet-body form" style="margin-bottom:50%;" v-cloak>
                <!-- BEGIN FORM-->
                {!! Form::open(array('route' => 'attendanceSheet.storeByDate','method'=>'POST','class'=>'form-horizontal','id'=>'attend-form')) !!}
                {{ csrf_field() }}
                <div class="form-body">
                    <div class="row">
                        <div class=" col-md-12">
                            <div class="row">
                               

                               <!--  <div class="col-md-4">
                                    <label class="control-label ">@lang('layout.Number')</label>
                                    <input type="number" :disabled="selected_type==null || selected_type==''"
                                           name="type_number" id="number" @input="numberChange" class="form-control">
                                </div>  -->

                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                    <div class="form-group">

                                        <div class="col-md-12">
                                            <label class="control-label">@lang('layout.Date')</label>


                                             <input type="text" name="date" id="date" class="form-control date now"
                                                                           autocomplete="off">
                                        </div>
                                    </div>
                                </div> 
                                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                    <div class="form-group">

                                        <div class="col-md-12">
                                            <label class="control-label">@lang('layout.ToDate')</label>


                                             <input type="text" name="to_date" id="to_date" class="form-control date"
                                                                           autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
                                    <div class="form-group">

                                        <div class="col-md-12">
                                            <label class="control-label">@lang('layout.Type')</label>
                                                <select class="form-control"  v-model="att_method" name="att_method">
                                                    <option value="" disabled>@lang('layout.SelectType')</option>
                                                      <option value="em_number">@lang('layout.BaseOnEmployeeCardId')</option>
                                                      <option value="em_class">@lang('layout.BaseOnEmployeeAttendanceClass')</option>
                                                </select>
                                        </div>
                                    </div>
                                </div>

                            




                                 <div class="col-md-3" v-if="att_method=='em_number'">
                                    <label class="control-label ">@lang('layout.CardId')(@lang('layout.Employee'))</label>
                                       <div class="input-group">
                                                <input class="form-control" id="from_id" autocomplete="off"
                                                       name="from_id">

                                                <span class="input-group-addon"> @lang('layout.To') </span>
                                                <input class="form-control" id="to_id" autocomplete="off"
                                                       name="to_id">
                                        </div>
                                </div>

                                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12" v-if="att_method=='em_class'">
                                    <div class="form-group">

                                        <div class="col-md-12">
                                        <label class="control-label">@lang('layout.EmployeeAttendanceClass')</label>
                                            <v-select 
                                                label="name" 
                                                :options="attendance_class"
                                                v-model="selected_attendance_class"
                                                >
                                            </v-select>
                                            <input type="hidden" name="attendance_class_id"
                                                :value="!selected_attendance_class?null:selected_attendance_class.id" >
                                                <!-- <select class="form-control"  id="attendance_class">
                                                    <option value="">@lang('layout.Select')</option>
                                                    @foreach($employeeAttendanceClass as $ac)
                                                      <option value="{{$ac->id}}">{{$ac->name}}</option>
                                                    @endforeach
                                                </select> -->
										</div>
                                    </div>
                                </div>



                                <div class="col-md-1">
                                    <label class="control-label">&nbsp;</label>
                                    <button type="button" @click="searchType" class="btn btn-info form-control"><i
                                                class="fa fa-search"></i>@lang('layout.Search')</button> 

                                </div> 
								
								<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                    <div class="form-group">

                                        <div class="col-md-12">
										<label class="control-label">@lang('layout.Description')</label>
                                            <textarea name="description1" rows="1"  class="form-control"></textarea>
										</div>
                                    </div>
                                </div>

                            </div>
                 


                        </div>


                    </div>
                    <br>
                    <!-- begin items -->
                    <div class="row" v-if="employess.length>0" style="overflow-x: scroll;">
                        <div class="md-checkbox-inline">
                            <div class="md-checkbox has-info">
                                <input type="checkbox" id="checkbox17" class="md-check" v-model="showOvertime" @click="hideOvertime()">
                                <label for="checkbox17">
                                    <span class="inc"></span>
                                    <span class="check"></span>
                                    <span class="box"></span> @lang('layout.OvertimeAndDelay')</label>
                            </div>
                        </div>
                        <table id="table_content" class="table table-bordered table-advance">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>@lang('layout.Name') </th>
                                <th>@lang('layout.Type') </th>
                                <th>@lang('layout.WorkType') </th>
                                <th style="max-width: 5px">@lang('layout.Status') </th>
                                <th style="max-width: 5px">@lang('layout.Absent') </th>
                                <th style="max-width: 5px">@lang('layout.HoursOrShifts') </th>
                                <th>@lang('layout.Rent') </th>
                              <!--   <th style="color: red">
                                    @lang('layout.Leave')
                                    <label class="mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox"  v-model="showLeave" @click="hideElement()">
                                        <span></span>
                                    </label>
                                </th> -->
                                <th v-if="showOvertime">@lang('layout.OvertimeHours') </th>
                                <th v-if="showOvertime">@lang('layout.DelayHours') </th>
                                <th>
                                    <div class="md-checkbox-inline">
                                        <div class="md-checkbox has-danger">
                                            <input type="checkbox" id="checkbox16" class="md-check" v-model="showLeave" @click="hideElement()">
                                            <label for="checkbox16" style="color: white;">
                                                <span class="inc"></span>
                                                <span class="check"></span>
                                                <span class="box"></span> @lang('layout.Leave')</label>
                                        </div>
                                    </div>
                                </th>
                                <th v-if="showLeave">@lang('layout.Leave') </th>
                                <th v-if="showLeave">@lang('layout.LeaveType') </th>
                                <th v-if="showLeave">@lang('layout.Description') </th>

                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(employee,index) in employess">
                                <input type="hidden" name="employee_id[]" :value="(!employee)?null:employee.id">

                                      <!--   <input v-if="employee.attendance_type=='hourly'" type="hidden" name="static_time[]" value="{{getCompanyWorkAmount()['hourly']}}">  
                                        <input v-if="employee.attendance_type=='shifty'" type="hidden" name="static_time[]" value="{{getCompanyWorkAmount()['shifty']}}">  

                                        <input v-else type="hidden" name="static_time[]" value="">   -->

                                <td>@{{index+1}}</td>
                                <td>@{{(!employee)?null:employee.name}}</td>
                              <!--   <td>@{{(!item.item)?null:item.item.site_name}}</td>
                                <td>@{{(!item.item)?null:item.item.qut_in}}</td>
                                <td>@{{(!item.item)?null:item.item.measure}}</td>
                                <td>@{{myRound((!item.item)?null:item.item.cost)}}</td> -->
                                
                                <td>
                                    <select name="attendance_type2[]" class="form-control">
                                          <option v-for="at_type in attendanceType" 
                                            :value="at_type.id" >@{{at_type.name}}</option>

                                    </select>
                                </td> 
                                <td>
                                   @{{(!employee)?null:employee.attendance_type}}
                                </td>
                                <td >
                                    <label class="mt-checkbox mt-checkbox-outline">
                                        <input type="checkbox" :name="'persent_absent['+index+']'" checked="checked" >
                                        
                                        <span v-if="!employee.leave_type_status"></span>
                                        <!-- <span></span> -->
                                    </label>
                                    <input type="hidden" name="attendance_type[]" :value="(!employee)?null:employee.attendance_type">
                                </td>  
                                <td>
                                    <input type="number" class="form-control" :name="'absent['+index+']'" >
                                </td> 
                                <td v-if="employee.attendance_type=='daily' || employee.attendance_type=='hourly'">
                                    <input type="number" class="form-control" :name="'amount['+index+']'" value="{{getCompanyWorkAmount()['hourly']}}">
                                </td> 
                                <td v-else>
                                    <input type="number" class="form-control" :name="'amount['+index+']'" value="{{getCompanyWorkAmount()['shifty']}}">
                                </td>
                                <td>
                                    <div class="input-group">
                                        <input type="number" class="form-control" :name="'rent['+index+']'" v-model="employee.rent">
                                        <span class="input-group-addon">@{{(employee.currency)?employee.currency:null}}</span>
                                    </div>
                                </td>
                                <td v-if="showOvertime">
                                    <input type="number" class="form-control" :name="'overtime_qty['+index+']'">
                                </td> 
                                <td v-if="showOvertime">
                                    <input type="number" class="form-control" :name="'delay_qty['+index+']'" >
                                </td>
                                <td><span v-on:click="deleteItem(index)"><i class="paddint-both glyphicon glyphicon-trash"></i></span></td>

                              <td v-if="showLeave" >
                                    <select name="leave_type[]" class="form-control">
                                        <option value="">@lang('layout.SelectType')</option>
                                          <option v-for="leave in leaveType"
                                                      :value="leave.id">@{{leave.name}}
                                         </option>
                                    </select><!-- 
                                    <input type="hidden" name="types[]" :value="(!item.item)?null:item.item.type"> -->
                                    <!-- v-model="employee.leave_type_status" -->
                                </td>  
                                <td v-if="showLeave">
                                    <select name="leave_type_status[]" class="form-control"  v-model="employee.leave_type_status">
                                        <option value="">@lang('layout.SelectType')</option>
                                          <option value="justified">@lang('layout.Justifiend')</option>
                                          <option value="unjustified">@lang('layout.Unjustified')</option>
                                    </select>
                                    <!-- <input type="hidden" name="types[]" :value="(!item.item)?null:item.item.type"> -->
                                </td>  
                                <td v-if="showLeave" >
                                    <textarea name="description[]" class="form-control"></textarea>
                                    <!-- <input type="hidden" name="types[]" :value="(!item.item)?null:item.item.type"> -->
                                </td>  
                            </tr>
                            </tbody>
                        </table>

                    </div>
                    <!-- end items -->

                    <div class="col-md-4 col-md-offset-4 text-center">
                        <br>
                        <button type="button" class="btn green" onclick="regForm(this)">@lang('layout.Submit')</button>
                        <button type="button" class="btn blue" @click="saveAndNew($event)" >@lang('layout.SaveAndNew')</button>
                        <a href="{{route('attendanceSheet.index')}}" class="btn default"><i
                                    class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
                    </div>
                </div>


                {!! Form::close() !!}

            </div>

            <!-- END FORM-->
        </div>



    </div>

@endsection
@push('scripts')

   <script type="text/javascript">
        @if(App::getLocale())
    Vue.use(VeeValidate, {
        locale: '{{App::getLocale()}}',
    });
    @else
        Vue.use(VeeValidate, {
            locale: 'en',
        });
        @endif

        Vue.component('v-select', VueSelect.VueSelect);

            var Modal = Vue.component('cmodal',
                {
                    template:'#cmodal-template',
                    props: ['show'],
                });


        var leaveType = {!!$leaveType!!};
        var attendanceType = {!!$attendanceType!!};
        var employeeAttendanceClass={!! json_encode($employeeAttendanceClass) !!};

        var vm = new Vue({
            el: '#attendance',
            data: {
                
                selected_type:'',
                inventories :[],
                employess:[],
                leaveType:leaveType,
                attendanceType:attendanceType,
                selected_leave_type:'',
                leave:'',
                hideHead:false,
                showLeave:false,
                attendance_class:employeeAttendanceClass,
                selected_attendance_class:null,
                att_method:null,
                showOvertime:false,
                hideHeadOvertime:false
               

            },


            methods: {
                onChange(index)
                {
                    // vm.selected_leave_type = event.target.value;
                    // console.log('fff',vm.selected_leave_type);
                   // var type= vm.employess[index].attendance_type;
                   //  vm.employess[index].type = type
                },

                hideElement(index){
                    vm.hideHead = true;
                    vm.showLeave = true;
                    console.log(vm.hideHead)
                },
                hideOvertime(index){
                    vm.showOvertime = true;
                    vm.hideHeadOvertime = true;
                },
            
                numberChange() {
                    this.inventories = [];
                },
        
      

                // search members
                searchType() {
                    var from_id = (document.getElementById('from_id'))?document.getElementById('from_id').value:null;
                    var to_id   = (document.getElementById('to_id'))?document.getElementById('to_id').value:null;
                    var date    = document.getElementById('date').value;
                    // var attendance_class = document.getElementById('attendance_class').value;
                    var attendance_class = (vm.selected_attendance_class)?vm.selected_attendance_class.id:null;
                    if(vm.att_method=="em_number")
                    {
                        attendance_class = null
                    }
                    
                    // em_number
                    // em_class

                    
                    this.employess = [];
                    // this.typeInfo = null;
                    if (from_id || to_id || attendance_class) {
                        axios.get("{{route('callMethod.search')}}", {
                            params: {
                                method_name: 'employeeSearch', 
                                from_id  : from_id,
                                to_id    : to_id, 
                                date     : date,
                                attendance_class:attendance_class
                            }
                        })
                            .then(function (response) {

                                if (response.data.length > 0) {
                                    // console.log('ddd',response.data);
                                    // if (response.data[0]) {
                                        // vm.typeInfo = response.data[0].typeInfo;
                                        // var myDataArray=response.data[0].myData;
                                        for(var i=0;i<response.data.length;i++)
                                        {
                                            // console.log('ddffffffd',response.data);
                                           
                                            vm.employess.push({
                                                id:response.data[i].id,
                                                name:response.data[i].name,
                                                rent:response.data[i].rent,
                                                currency:response.data[i].currency,
                                                type:null,
                                                attendance_type:response.data[i].attendance_type,
                                                leave:null,
                                                leave_type_status:''
                                            });

                                        }

                                       console.log('ddd',vm.employess)

                                    // }

                                }
                                // else {
                                //     var id = response.data.id;
                                //     if (id) {
                                //         var url = "{{url('itemExpense')}}/" + id + '/edit';

                                //         window.location.href = url;
                                //     }
                                // }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }

                },
                // end search type




                // generic function for adding item to list
                addNew(type = null, index) {
                    
                    this.temp_items = [];
                    if (type != null) {
                        if (type == 'inventory') {
                            if (this.inventories[index + 1] == undefined) {
                                this.temp_items = [];
                                this.inventories.push({item: null});
                            }
                        }
                        if (type == 'payment') {
                            if (this.payments[index + 1] == undefined) {
                                this.checkExistingPayment(index, '');
                                this.payments.push({
                                    items: this.banks,
                                    item: null,
                                });
                            }
                        }
                    }

                },

                // delete item from list
                deleteItem(index) {
                    // console.log('this is lala',this.employess[index])
                    this.employess.splice(index, 1);
                },

                saveAndNew()
                {
                    this.$validator.validate()
                    .then(valid =>{
                        if(valid)
                        { 
                            var url="{{route('attendanceSheet.storeByDate')}}";
                            form_id='attend-form';
                            var data= $('#'+form_id).serialize();
                            // console.log(444, data);
                            toggleBlock(true);
                            axios.post(url,data)
                            .then(function(response){
                                    toggleBlock(0);
                                    if(response.data.result==1)
                                    {
                                        $('#'+form_id).trigger('reset');
                                        
                                        toastr.success('',response.data.message); 
                                        location.reload();
                                    
                                    }
                                    else
                                    {
                                        var message="{{__('message.Warning')}}";
                                        //$('#error-sound')[0].play();
                                        toastr.warning('',message);
                                    }
                            })
                            .catch(function(error){
                            toggleBlock(0);
                                console.log(error);
                                var message="{{__('message.Warning')}}";
                                //$('#error-sound')[0].play();
                                toastr.warning('',message);
                            });
                        
                        }
                    })
                },

            }
        });

    </script>
@endpush