@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-->
                
                <div class="form-body">
                    <div class="row">
                        <div class=" col-md-12" style="background:radial-gradient(#a8afff, transparent)">
                            <br/>
                            <h4>@lang('button.AddFromAttendanceDevice')</h4>
                            <div class="row">
                                {{-- <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" ref="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.Description')</label>
                                            <textarea name="description" rows="1" v-model="description" class="form-control"></textarea>
										</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">&nbsp;</label>
                                            <br/>
                                            <button type="button" @click="getAttendance" class="btn green"><i class="fa fa-plus"></i> @lang('button.AddFromAttendanceDevice') </button> 
										</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class=" col-md-12">
                            <br/>
                            <br/>
                            <br/>
                        </div>
                        <div class=" col-md-12" style="background:radial-gradient(#96dfea, transparent)">
                            <br/>
                            <h4>@lang('button.AddFromAttendanceDevice') @lang('layout.File')</h4>
                            <div class="row col-md-12">
                                <!-- BEGIN FORM-->
                                {{Form::open(['route'=>'attendanceSheet.postStoreByFinger','method'=>'POST','enctype'=>'multipart/form-data','class'=>'form-horizontal','id'=>'import-form'])}}
                                    {{ csrf_field() }}
                                    <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.SelectFile') :</label>
                                                {{Form::file('att_file',null,['class' => 'form-control','placeholder' => __('layout.File')])}}
                                            </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.Description')</label>
                                                <textarea name="description" rows="1"  class="form-control"></textarea>
                                            </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">&nbsp;</label>
                                                <br/>
                                                <button type="button" onClick="sendFormData(this)" class="btn green"><i class="fa fa-plus"></i> @lang('button.AddFromAttendanceDevice') @lang('layout.File')</button> 
                                            </div>
                                        </div>
                                    </div>
                                {{Form::close()}}
                                <!-- end form -->
                            </div>
                        </div>
                        <div class=" col-md-12">
                            <br/>
                            <br/>
                            <br/>
                        </div>
                        <div class=" col-md-12" style="background:radial-gradient(#cfe0ff, transparent)">
                            <br/>
                            <h4>@lang('layout.AutoAddFromAttendanceDevice')</h4>
                            <div class="row">
                                {{-- <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="date1" ref="date1" 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.Description')</label>
                                            <textarea name="description1" rows="1"  v-model="description1" class="form-control"></textarea>
										</div>
                                    </div>
                                </div> 
                                <div class="col-md-3">
                                    <label class=" control-label">@lang('layout.Fingerprint')</label>
                                    <div class="col-md-12 mt-checkbox">
                                        <label class="mt-checkbox mt-checkbox-outline">
                                            <input type="checkbox" @click="clearFinger()" name="finger" v-model="finger">
                                            <span style="border: 1px solid #000000;"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <br>
                    
                    <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.Return')</a>
                    </div>
                </div>

            </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: {
                finger:null,
                fingerCounter: 0,
                selectMem:'',
                description:'',
                date:'',
                description1:'',
                date1:''
            },
            methods: {
                clearFinger() {
                    setTimeout((function () {
                        vm.fingerCounter = 0;
                        var finger = vm.finger;
                        if (finger) {
                            axios.get("{{route('callCheque.search')}}", {
                                params: {
                                    method_name: 'clearFinger',
                                }
                            })
                            .then(function(response) {
                                if (response.data) {
                                    vm.getFinger()
                                } else {
                                    swal({ title:"{{__('message.FDeviceNotConn')}}", dangerMode: true});
                                }
                            })
                            .catch(function(error) {
                                swal({ title:"{{__('message.FDeviceNotConn')}}", dangerMode: true});
                            });
                        }
                    }), 2e2);
                },
                getFinger() {
                    var finger = vm.finger;
                    setTimeout((function () {
                        if (finger) {
                            axios.get("{{route('attendanceSheet.storeByFinger')}}", {
                                params: {
                                    method_name: 'getFinger',
                                    description: vm.description1,
                                    // date: vm.$refs.date1.value,
                                }
                            })
                            .then(function(response) {
                                // console.log(12);
                                if (response.data) {
                                    // console.log(13, response.data);
                                    if (response.data == 'CSuccess') {
                                        // swal("{{__('message.CSuccess')}}");
                                        swal({ title:"{{__('message.CSuccess')}}", timer: 5000});
                                        vm.getFinger();
                                    } else {
                                        swal({ title:"{{__('message.FDeviceNotConn')}}", dangerMode: true});
                                        vm.finger = false;
                                    }
                                } else {
                                    vm.getFinger();
                                }
                            })
                            .catch(function(error) {
                                vm.getFinger();
                            });
                        }
                    }), 5e3);
                },
                getAttendance() {
                    axios.get("{{route('attendanceSheet.storeByFinger')}}", {
                        params: {
                            method_name: 'getAttendance',
                            description: vm.description,
                            // date: vm.$refs.date.value,
                        }
                    })
                    .then(function(response) {
                        // console.log(12, response.data);
                        if (response.data) {
                            if (response.data == 'CSuccess') {
                                // console.log(13, response.data);
                                swal({ title:"{{__('message.CSuccess')}}", timer: 5000});
                            } else if (response.data == 'NoData') {
                                swal({ title:"{{__('message.NoDataFound')}}", dangerMode: true});
                            } else {
                                swal({ title:"{{__('message.FDeviceNotConn')}}", dangerMode: true});
                            }
                        } else {
                            swal({ title:"{{__('message.FDeviceNotConn')}}", dangerMode: true});
                        }
                    })
                    .catch(function(error) {
                        swal({ title:"{{__('message.FDeviceNotConn')}}", dangerMode: true});
                    });
                },
            }
        });

        function sendFormData(e) {
            var el = $(e);
            var form = el.parents('form').get(0);
            var data = $('#import-form').serialize();
            console.log('test 22', data);
            swal({
                title: "@lang('layout.AreYouSure?')",
                icon: 'warning',
                buttons: ["@lang('layout.Cancel')", "@lang('layout.Submit')"],
                dangerMode: true,
            }).then((wichButton) => {
                if (wichButton) {
                    form.submit();
                    return true;
                }
                return false;
            });
        }

    </script>
@endpush