@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="">

        <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.EditAttendance') </span>
                    <!-- <span class="caption-helper">some info...</span> -->
                </div>
                <div class="tools">

                </div>
            </div>
            <div id="attendance" v-cloak class="portlet-body form" style="margin-bottom:50%;">
                <!-- BEGIN FORM-->
				{{Form::model($attendance,['route' => ['attendanceSheet.update',$attendance->id],'method' => 'PATCH','class' => 'form-horizontal','id'=>'attendance-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"
                                                    value="{{$attendance->date}}"  autocomplete="off">
                                        </div>
                                    </div>
                                </div>




                                 <div class="col-md-3">
                                    <label class="control-label ">@lang('layout.CardId')(@lang('layout.Employee'))</label>
                                       <div class="input-group">
                                                <input class="form-control" id="from_id" autocomplete="off"
                                                    value="{{$attendance->start}}"   name="from_id">

                                                <span class="input-group-addon"> @lang('layout.To') </span>
                                                <input class="form-control" id="to_id" autocomplete="off"
                                                    value="{{$attendance->end}}"   name="to_id">
                                            </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.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">
                                    <br>
                                    <button type="button" @click="searchType" class="btn btn-info" style="background-color: rgb(80, 129, 141) !important; border: 1px solid rgb(80, 129, 141) !important;"><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">{{$attendance->description}}</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.PresentAbsent') </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.OvertimeAmount') </th>
                                <th v-if="showOvertime">@lang('layout.DelayHours') </th>
                                <th v-if="showOvertime">@lang('layout.DelayAmount') </th>

                                <th>
									<div class="md-checkbox-inline">
										<div class="md-checkbox has-info">
											<input type="checkbox" id="checkbox16" class="md-check" v-model="showLeave" @click="hideElement()">
											<label for="checkbox16">
												<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['+index+']'" :value="(!employee)?null:employee.id"> --}}
                                <td>@{{index+1}}</td>
                                <td>
                                    {{-- @{{(!employee)?null:employee.name}} --}}
                                    <v-select 
                                    class="vue-select2" 
                                    v-model="employee.item" 
                                    label="name" 
                                    @search="onMemberSearch"
                                    :options="selectedData2"
                                    >
                                    </v-select>
                                    <input type="hidden" :name="'employee_id['+index+']'" :value="(!employee.item)?null:employee.item.id">
                                </td>
                                
                                
                                <td>
									<v-select placeholder="@lang('layout.Type')" label="name"  :options="attendanceType" v-model="(!employee.attendanceTypes)?null:employee.attendanceTypes" ></v-select>
                                   <input type="hidden" :name="'attendance_type2['+index+']'" :value="(employee.attendanceTypes)?employee.attendanceTypes.id:null">
                                </td> 
                                <td>
                                   @{{(!employee.item)?null:employee.item.attendance_type}} @{{(!employee.item)?null:employee.item.leave_type}}
                                </td>
                                <td>
                                    <label class="mt-checkbox mt-checkbox-outline">
                                        <input v-if= "employee.present_adsent == 1" type="checkbox" checked :name="'persent_absent['+index+']'" >
                                        <input v-if= "employee.present_adsent != 1" type="checkbox" :name="'persent_absent['+index+']'" >
                                        
                                        <input type="hidden" :name="'attendance_type['+index+']'" :value="(!employee)?null:employee.attendance_type">
                                        <span v-show="!employee.leave_type"></span>
                                    </label>
                                </td> 

                                <td v-if="employee.item && (employee.item.attendance_type=='daily' || employee.item.attendance_type=='hourly')">
                                    <input type="number" class="form-control" :name="'amount['+index+']'" :value="(!employee.item)?null:(employee.item.static_time)?employee.item.static_time:hourly_amount">
                                </td> 
                                <td v-else>
                                    <input type="number" class="form-control" :name="'amount['+index+']'" :value="(!employee.item)?null:(employee.item.static_time)?employee.item.static_time:shifty_amount">
                                </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.item)?employee.item.currency:null}}</span>
                                    </div>
                                </td>
                                <td v-if="showOvertime">
                                    <input type="number" class="form-control" :name="'overtime_qty['+index+']'" v-model="employee.overtime_qty">
                                </td> 
                                <td v-if="showOvertime">
                                    <input type="number" class="form-control" :name="'overtime_amount['+index+']'" v-model="employee.overtime_amount">
                                </td> 
                                <td v-if="showOvertime">
                                    <input type="number" class="form-control" :name="'delay_qty['+index+']'" v-model="employee.delay_qty">
                                </td> 
                                <td v-if="showOvertime">
                                    <input type="number" class="form-control" :name="'delay_amount['+index+']'" v-model="employee.delay_amount">
                                </td>


                                <td><span v-on:click="deleteItem(index)"><i class="paddint-both glyphicon glyphicon-trash"></i></span></td>

								<td v-if="showLeave">
									<v-select placeholder="@lang('layout.Type')" label="name"  :options="leaveType" v-model="(!employee.leaveTypes)?null:employee.leaveTypes" ></v-select>
                                   <input type="hidden" :name="'leave_type['+index+']'" :value="(employee.leaveTypes)?employee.leaveTypes.id:null">
                                </td>
                                <td v-if="showLeave">
                                    <select :name="'leave_type_status['+index+']'" class="form-control" v-model="employee.leave_type">
                                        <option value="">@lang('layout.SelectType')</option>
                                          <option value="justified" v-if= "employee.leave_type == 'justified'" selected>@lang('layout.Justifiend')</option>
                                          <option value="justified" v-if= "employee.leave_type != 'justified'">@lang('layout.Justifiend')</option>
                                          <option value="unjustified"  v-if= "employee.leave_type == 'unjustified'" selected>@lang('layout.Unjustified')</option>
                                          <option value="unjustified"  v-if= "employee.leave_type != 'unjustified'">@lang('layout.Unjustified')</option>
                                    </select>
                                </td>  
                                <td v-if="showLeave" >
                                    <textarea :name="'description['+index+']'" class="form-control">@{{(!employee)?null:employee.description}}</textarea>
                                </td>  
                            </tr>

                            <tr style="background-color: #ffffff;">
                                <td></td>
                                <td>
                                    <center>
                                        <button type="button" @click="addNew('attendace',1000)" class="btn btn-success"><i class="fa fa-plus"></i></button>
                                    </center>
                                </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>
                        <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">
        Vue.component('v-select', VueSelect.VueSelect);

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


        var leaveType = {!!$leaveType!!};
        var attendanceType = {!!$attendanceType!!};
        var selectedData = {!!$selectedData!!};
        var employeeAttendanceClass = {!! json_encode($employeeAttendanceClass) !!};
        var selected_attendance_class = {!! json_encode($selected_attendance_class) !!};
        var hourly_amount = {!! getCompanyWorkAmount()['hourly'] !!};
        var shifty_amount = {!! getCompanyWorkAmount()['shifty'] !!};


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

            },
			
			mounted: function () {
                // initialize the selected item
				console.log('asd',this.selectedData);
                for (var i = 0; i < this.selectedData.length; i++) {
					
					this.employess.push({
                        item:this.selectedData[i],
						id:this.selectedData[i].id,
						name:this.selectedData[i].name,
						attendance_type:this.selectedData[i].attendance_type,
						present_adsent:this.selectedData[i].present_adsent,
                        static_time:this.selectedData[i].static_time,
						description:this.selectedData[i].description,
						leave_type:this.selectedData[i].leave_type,
						currency:this.selectedData[i].currency,
						rent:this.selectedData[i].rent,
						overtime_qty:this.selectedData[i].overtime_qty,
						delay_qty:this.selectedData[i].delay_qty,
						overtime_amount:this.selectedData[i].overtime_amount,
						delay_amount:this.selectedData[i].delay_amount,
						attendanceTypes:_.find(this.attendanceType, (o) => o.id == this.selectedData[i].travel_id),
						leaveTypes:(this.selectedData[i].leave_id && this.selectedData[i].leave_id != 0)? _.find(this.leaveType, (o) => o.id == this.selectedData[i].leave_id) :' ',
						type:null,
						leave:null,
					});
					
					if(this.selectedData[i].leave_id && this.selectedData[i].leave_id != 0){
						this.showLeave = true;
					}
                    if(this.selectedData[i].overtime_qty || this.selectedData[i].delay_qty)
                    {
                        this.showOvertime = true;
                    }
					
                }
            },
            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 = [];
                },
        
      

                onMemberSearch: _.debounce((search, loading) => {
                    var date = document.getElementById('date').value;
                    axios.get("{{route('callMethod.search')}}", {
                        params: {
                            method_name: 'employeeSearchForAttendaceEdit',
                            search: search,
                            date   : date
                        }
                    })
                        .then(function (response) {
                            this.selectedData2 = [];
                            console.log('new empl',response);
                            if (response.data.length > 0) {
                                vm.selectedData2 = response.data;
                                // console.log('data', vm.account_list);
                            }
                            loading(false);
                        })
                        .catch(function (error) {
                            console.log(error);
                        })

                }, getDebounceTime()),

                // search stock based on type purchase/build/opening
                searchType() {
                    var from_id = document.getElementById('from_id').value;
                    var to_id = document.getElementById('to_id').value;
                    var date = document.getElementById('date').value;
                    var attendance_class = (vm.selected_attendance_class)?vm.selected_attendance_class.id:null;
                    // var attendance_class = document.getElementById('attendance_class').value;

                    
                    this.employess = [];
                    // this.typeInfo = null;
                    if (from_id || to_id || attendance_class) {
                        // console.log('dddpp',from_id,to_id,date,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('ddd',response.data);
                                           
                                            vm.employess.push({
                                                item:this.selectedData[i],
                                                id:response.data[i].id,
                                                name:response.data[i].name,
                                                attendance_type:response.data[i].attendance_type,
                                                rent:response.data[i].rent,
                                                currency:response.data[i].currency,
												attendanceTypes:this.attendanceType[0],
												leaveTypes:' ',
												type:null,
												leave:null,
                                                leave_type:''
												
												
                                            });

                                        }

                                    //    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


                // in here you can check and decide to allow duplicate bank for payment or not
                checkExistingPayment(index = null, name = '') {
                    var bank_temp = this.banks.slice();
                    var bank_temp1 = [];
                    for (var i = 0; i < this.payments.length; i++) {
                        if (this.payments[i].item != null) {
                            var fined = bank_temp.findIndex((item) => item.name == this.payments[i].item.name);
                            if (fined != -1) {
                                var o = bank_temp.splice(bank_temp.findIndex((item) => item.name == this.payments[i].item.name), 1);
                            }
                        }
                    }
                    this.payments[index].items = bank_temp.filter((item) => {
                        return (new RegExp(name.toLowerCase())).test(item.name.toLowerCase())
                    });
                    //this.payments[index].items =bank_temp;


                },

                // generic function for adding item to list
                addNew(type = null, index) {
                    this.selectedData2 = [];
                    if (type != null) {
                        if (type == 'attendace') {
                            if (this.employess[index + 1] == undefined) {
                                this.selectedData2 = [];
                                // this.inventories.push({item: null});
                                vm.employess.push({
                                    item:null,
                                    attendanceTypes:this.attendanceType[0],
                                    rent:0,
                                    leaveTypes:' ',
                                    type:null,
                                    leave:null,
                                    leave_type:''
                                    
                                    
                                });

                            }
                        }
                    }

                },

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


            }
        });

    </script>
@endpush