@extends('layouts.app')
@section('style')
    <link rel="stylesheet" type="text/css" href="{{URL::asset('multiple-select/css/jquery.multiselect.css')}}">

    <link href="{{URL::asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css')}}" rel="stylesheet" type="text/css" />
    <!-- <link href="{{URL::asset('assets/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{URL::asset('assets/clockface/css/clockface.css')}}" rel="stylesheet" type="text/css" /> -->

@stop
@section('content')


        <div class="portlet light bordered sale">
            <!-- BEGIN TAB PORTLET-->
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-anchor font-green-sharp"></i>&nbsp;
                        <span class="caption-subject font-green-sharp bold uppercase">@lang('layout.CreateNewUser')</span>
                    </div>
                    <div class="actions">
                    </div>
                </div>
                <div  class="portlet-body">
                        {!! Form::open(array('route' => 'users.store','method'=>'POST','enctype'=>'multipart/form-data')) !!}
                        <div class="row" id="app" v-cloak>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.Name'):</label>
                                    {!! Form::text('name', null, array('class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.Name'))) !!}
                                    <span class="required">@{{ errors.first('name') }}</span>
                                </div>
                            </div>

                            @if(getLoginUserName()=="true")
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.TelegramUserName'):</label>
                                    {!! Form::text('email', null, array('class' => 'form-control','data-vv-as' => __('layout.TelegramUserName'))) !!}
                                    <span class="required">@{{ errors.first('email') }}</span>
                                </div>
                            </div>
                            @else 
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.Email'):</label>
                                    {!! Form::text('email', null, array('class' => 'form-control','v-validate' =>'"required|email"','data-vv-as' => __('layout.Email'))) !!}
                                    <span class="required">@{{ errors.first('email') }}</span>
                                </div>
                            </div>
                            @endif

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.ResetPasswordEmail'):</label>
                                    {!! Form::text('reset_password_email', null, array('class' => 'form-control','v-validate' =>'"email"','data-vv-as' => __('layout.ResetPasswordEmail'))) !!}
                                    <span class="required">@{{ errors.first('reset_password_email') }}</span>
                                </div>
                            </div> 
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.Language'):</label>
                                    {!! Form::select('lang', ['en' => 'English', 'fa' => 'Persian','pa' =>'Pashto','ru' =>'Russia'],null,array('class' => 'form-control'))!!}
                                    <span class="required"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.Password'):</label>
                                    {!! Form::password('password', array('class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.Password'))) !!}
                                    <span class="required">@{{ errors.first('password') }}</span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.ConfirmPassword'):</label>
                                    {!! Form::password('confirm-password', array('class' => 'form-control','v-validate' =>'"required"','data-vv-as' => __('layout.ConfirmPassword'))) !!}
                                    <span class="required">@{{ errors.first('confirm-password') }}</span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.Role'):</label>
                                    {!! Form::select('roles[]', $roles,[], array('class' => 'form-control','multiple','id'=>'type','v-validate' =>'"required"','data-vv-as' => __('layout.Role'))) !!}
                                    <span class="required">@{{ errors.first('roles[]') }}</span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label">@lang('menu.Backups'):</label>
                                    {!! Form::select('backup', ['yes' => __('layout.BackupRestor'), 'noRestor' => __('layout.Backup'), 'no' => __('layout.Not')],null,array('class' => 'form-control'))!!}
                                    <span class="required"></span>

                                </div>
                            </div> 
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.UserType'):</label>
                                    {!! Form::select('user_type', ['admin' => __('layout.Admin'),'user' => __('layout.User')],null,array('class' => 'form-control'))!!}
                                    <span class="required"></span>

                                </div>
                            </div>
                            <div class="row col-md-12" style="padding-right: 5px !important; padding-left: 5px !important;">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label">@lang('layout.UserLockTime')(@lang('layout.Minute')):</label>
                                        {!! Form::select('lockout_time', [0 => __('layout.NoLock'),1 =>1,2=>2,3=>3,5=>5,10=>10,15=>15],null,array('class' => 'form-control'))!!}
                                        <span class="required"></span>

                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label">@lang('layout.AccessDays'):</label>
                                        {!! Form::select('days[]', $day,$sectedDay, array('class' => 'form-control','multiple','id'=>'days','v-validate' =>'"required"','data-vv-as' => __('layout.AccessDays'))) !!}
                                        <span class="required">@{{ errors.first('days[]') }}</span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label">@lang('layout.Site')</label>
                                        <select role="button" name="multy_site_id[]" multiple="multiple"  class="list-style form-control" id="sites">
                                            @foreach($sites as $key=>$value)
                                                <option value="{{$key}}">{{$value}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label">@lang('layout.Account')</label>
                                        <select role="button" name="account_id[]" multiple="multiple"  class="list-style form-control" id="bankExpense">
                                            @foreach($bankExpense as $key1=>$value1)
                                                <option value="{{$key1}}">{{$value1}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row col-md-12" style="padding-right: 5px !important; padding-left: 5px !important;">
                                @if(systemConfig()[24] == 1)
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label">@lang('menu.FinancialClass')</label>
                                        <select role="button" name="financial_class_id[]" multiple="multiple"  class="list-style form-control" id="financialClass">
                                            @foreach($financialClass as $key1=>$value1)
                                                <option value="{{$key1}}">{{$value1}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                @endif
                                @if(getTelegramBot()=="true")
                                    <div class="col-md-3">
                                        <div class="form-group ">
                                            <label class="control-label">@lang('layout.TelegramID')</label>
                                            <v-select label="name" v-model="selected_telegram_id" :options="telegram_id"></v-select>
                                            <input type="hidden" name="telegram_id"  :value="(!selected_telegram_id)?null:selected_telegram_id.chat_id">
                                        </div>
                                    </div>
                                @endif

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label">@lang('menu.Position'):</label>
                                        <select v-model="select_pos" name="position_id" class="form-control">
                                            <option value="null">@lang('layout.Select')</option>
                                            <option v-for="pos in position" :value="pos.id">@{{pos.name}}</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-2 text-center">
                                    <div class="form-group">
                                        <label class="control-label">@lang('layout.InActiveChangeName'):</label>
                                        <input type="checkbox" class="form-control" name="change_user_name" value="off">
                                    </div>
                                </div>

                                <div class="col-md-3" v-show="select_pos">
                                    <div class="form-group"> 
                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                            <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                                <img src="" alt="" /> </div>
                                            <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"> </div>
                                            <div>
                                                <span class="btn default btn-file">
                                                    <span class="fileinput-new">@lang('layout.Signature')</span>
                                                    <span class="fileinput-exists">@lang('layout.Change')</span>
                                                    <!-- <input type="file" name="signature">  -->
                                                    {!! Form::file('signature', []) !!}</span>
                                                <a href="javascript:;" class="btn default fileinput-exists" data-dismiss="fileinput">@lang('layout.Remove')</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                           
                            <div class="col-md-2">
                                <h3>@lang('layout.AccessTime')</h3>
                                <div class="form-group">
                                    <label class="control-label">@lang('layout.On'): <input type="checkbox" class="form-control" name="time" v-model="time"> </label>
                                </div>
                            </div>
                            <div v-show="time">
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <label class="control-label">@lang('layout.Start'):</label>

                                        <div class="input-group">
                                            <input type="text" class="form-control timepicker timepicker-no-seconds" name="start_time">
                                            <span class="input-group-btn">
                                                <button class="btn default" type="button">
                                                    <i class="fa fa-clock-o"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <label class="control-label">@lang('layout.End'):</label>

                                        <div class="input-group">
                                            <input type="text" class="form-control timepicker timepicker-no-seconds" name="end_time">
                                            <span class="input-group-btn">
                                                <button class="btn default" type="button">
                                                    <i class="fa fa-clock-o"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 ">
                                <button type="button" @click="handleSubmit($event)" class="btn green">@lang('layout.Submit')</button>
                                <a href="{{route('users.index')}}" class="btn default"><i
                                                        class="fa fa-mail-reply"></i> @lang('layout.Cancel')</a>
                            </div>
                        </div>
                        {!! Form::close() !!}
                
                </div>
            </div>
            <!-- END TAB PORTLET-->
@endsection
@push('scripts')

    <script src="{{URL::asset('multiple-select/js/jquery.multiselect.js')}}"></script>
    <script src="{{URL::asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js')}}" type="text/javascript"></script>
    <script src="{{URL::asset('assets/pages/scripts/components-date-time-pickers.min.js')}}" type="text/javascript"></script>
    <!--  <script src="{{URL::asset('assets/bootstrap-daterangepicker/daterangepicker.min.js')}}" type="text/javascript"></script>
<script src="{{URL::asset('assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>

<script src="{{URL::asset('assets/clockface/js/clockface.js')}}" type="text/javascript"></script> -->



    <script>

        @if(App::getLocale())
    Vue.use(VeeValidate, {
        locale: '{{App::getLocale()}}',
    });
    @else
        Vue.use(VeeValidate, {
            locale: 'en',
        });
        @endif

        var position = {!!json_encode($position)!!};
        var telegram_id = {!!$telegram_id!!};
        new Vue({

            el: "#app",
            data: {
                time: '',
                position: position,
                select_pos: null,
                telegram_id:telegram_id,
                selected_telegram_id:null,
            },

            methods: {
                handleSubmit(e) {
                    this.$validator.validate().then(valid => {
                        if (valid) {
                            // console.log(e); 
                            // alert(e.target);
                            regForm(e.target);
                        }
                    });
                }
            },


        });


        $('#type').multiselect({
            // columns: 4,
            placeholder: "@lang('layout.SelectRole')"
        });

        $('#days').multiselect({
            placeholder: "@lang('layout.SelectDays')"
        });

        $('#sites').multiselect({
            placeholder: "@lang('layout.SelectSite')",
        });

        $('#bankExpense').multiselect({
            placeholder: "@lang('layout.SelectAccount')",
        });

        $('#financialClass').multiselect({
            placeholder: "@lang('menu.FinancialClass')",
        });

    </script>

@endpush