@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" /> -->
    <style type="text/css">
        .v-select.searchable .dropdown-toggle{
            height: 27px;
        }
    </style>
@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-lg-12" style="box-shadow: 0px 0px 3px rgba(172, 171, 171, 0.877);border-radius: 8px; margin-bottom: 10px;">
                    <div class="col-md-3">
                        <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>
                    @if(getLoginUserName()=="true")
                    <div class="col-md-3">
                        <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-3">
                        <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">
                        <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 class="col-md-3">
                        <label class="control-label">@lang('layout.Language'):</label>
                        {!! Form::select('lang', ['en' => 'English', 'fa' => 'فارسی','pa' =>'پښتو','ru' =>'Россия','zh' =>'Chinese'],null,array('class' => 'form-control'))!!}
                        <span class="required"></span>
                    </div>
                    <div class="col-md-3">
                        <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 class="col-md-3">
                        <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 class="col-md-3">
                        <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 class="col-md-3">
                        <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 class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 0px !important; margin: 0px !important;">
                        <div class="col-md-3">
                            <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 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>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 0px !important; margin: 0px !important;">
                        <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>
                        @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

                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="control-label">@lang('layout.CompanyFilter')</label>
                                <select role="button" name="user_company_id[]" multiple="multiple"  class="list-style form-control" id="companyFilter">
                                    @foreach($companies as $company)
                                        <option value="{{$company['id']}}">{{$company['name']}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        @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>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 0px !important; margin: 0px !important;">
                        <div class="col-md-3">
                            <div class="form-group ">
                                <label class="control-label">@lang('layout.Phone')</label>
                                <input type="number" name="phone" class="form-control" >
                            </div>
                        </div>
                        <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-3 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 class="col-md-3">
                            <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>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 0px !important; margin: 0px !important;margin-bottom: 10px;" v-show="time">
                        <div class="col-md-6">
                            <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" style="background: rgb(80, 129, 141);color: white;">
                                            <i class="fa fa-clock-o"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <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" style="background: rgb(80, 129, 141);color: white;">
                                            <i class="fa fa-clock-o"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </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">
                    <center>
                        <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>
                    </center>
                </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')",
        });
        $('#companyFilter').multiselect({
            placeholder: "@lang('layout.CompanyFilter')",
        });
    </script>
@endpush