@extends('admin.layout.base')

@section('title', 'Add User ')
@section('styles')
<link rel="stylesheet" href="{{asset('asset/css/intlTelInput.css')}}">
@endsection

@section('content')

<div class="content-area py-1">
    <div class="container-fluid">
    	<div class="box box-block bg-white">
            <a href="{{ route('admin.user.index') }}" class="btn btn-default pull-right"><i class="fa fa-angle-left"></i> @lang('admin.back')</a>

			<h5 style="margin-bottom: 2em;margin-left: 28px !important;">@lang('admin.users.Add_User')</h5>

            <form class="form-horizontal" action="{{route('admin.user.store')}}" method="POST" enctype="multipart/form-data" role="form">
            	{{csrf_field()}}

<div class="col-lg-9 form-group">

<div class="form-group row">
				<div class="col-lg-6 form-group">
					<label for="first_name" class="col-xs-12 col-form-label">@lang('admin.first_name')</label>
					<div class="col-xs-12">
						<input class="form-control" type="text" value="{{ old('first_name') }}" name="first_name" required id="first_name" placeholder="">
					</div>
				</div>

				<div class="col-lg-6 form-group">
					<label for="last_name" class="col-xs-12 col-form-label">@lang('admin.last_name')</label>
					<div class="col-xs-12">
						<input class="form-control" type="text" value="{{ old('last_name') }}" name="last_name" required id="last_name" placeholder="">
					</div>
				</div>
</div>

<div class="form-group row">
                                  <div class="col-lg-6 form-group">
					<label for="email" class="col-xs-12 col-form-label">@lang('admin.email')</label>
					<div class="col-xs-12">
						<input class="form-control" type="email" required name="email" value="{{old('email')}}" id="email" placeholder="">
					</div>
				</div>
                                  <div class="col-lg-6 form-group">
					<label for="password" class="col-xs-12 col-form-label">@lang('admin.password')</label>
					<div class="col-xs-12">
						<input class="form-control" type="password" name="password" id="password" placeholder="">
					</div>
				</div>
</div>

<div class="form-group row">      
                               <div class="col-lg-6 form-group">
					<label for="password_confirmation" class="col-xs-12 col-form-label">@lang('admin.account.password_confirmation')</label>
					<div class="col-xs-12">
						<input class="form-control" type="password" name="password_confirmation" id="password_confirmation" placeholder="">
					</div>
				</div>

				<div class="col-lg-6 form-group">
					<label for="country_code" class="col-xs-12 col-form-label">@lang('admin.mobile')</label>
					<div class="col-xs-4">
					    <input type="text" name="country_code" class="country-name form-control" id="country_code">
					</div>
					<div class="col-xs-8">
						<input class="form-control" type="number" value="{{ old('mobile') }}" name="mobile" required id="mobile" placeholder="">
					</div>


				</div>
</div>
<!--<div class="form-group row">
                                  <div class="col-lg-6 form-group">
					<label for="country_code" class="col-xs-12 col-form-label">Country Code</label>
					<div class="col-xs-12">
					<input type="text" name="country_code" class="country-name" id="country_code">
					</div>
				</div>

				<div class="col-lg-6 form-group">					
                                   <label for="mobile" class="col-xs-12 col-form-label">@lang('admin.mobile')</label>
					<div class="col-xs-12">
						<input class="form-control" type="number" value="{{ old('mobile') }}" name="mobile" required id="mobile" placeholder="">
					</div>
				</div>
</div>-->
</div>
<div class="col-lg-3 form-group">

					<label for="picture" class="col-xs-12 col-form-label">@lang('admin.picture')</label>
					<div class="col-xs-12">
						<input type="file" accept="image/*" name="picture" class="dropify form-control-file" id="picture" aria-describedby="fileHelp">
					</div>
				 <div class="form-group">
					<div class="col-xs-12" style="bottom: -8px;">
						<button type="submit" class="btn btn-primary">@lang('admin.users.Add_User')</button>
						<a href="{{route('admin.user.index')}}" class="btn btn-default">@lang('admin.cancel')</a>
					</div>
                                    </div>


</div>


				<div class="form-group row">
                                <!--   <div class="col-lg-6 form-group">
					<div class="col-xs-12" style="bottom: -8px;">
						<button type="submit" class="btn btn-primary">@lang('admin.users.Add_User')</button>
						<a href="{{route('admin.user.index')}}" class="btn btn-default">@lang('admin.cancel')</a>
					</div>
                                    </div>-->
                                  </div>


			</form>
		</div>
    </div>
</div>

@endsection

@section('scripts')
<script type="text/javascript" src="{{ asset('asset/js/intlTelInput.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('asset/js/intlTelInput-jquery.min.js') }}"></script>
<script type="text/javascript">
//For mobile number with date
       var input = document.querySelector("#country_code");
       window.intlTelInput(input,({
           // separateDialCode:true,
       }));
       $(".country-name").click(function(){
           var myVar = $(this).closest('.country').find(".dial-code").text();
           $('#country_code').val(myVar);
        });
		</script>
@endsection