@extends('admin.layout.base')

@section('title', 'Add Provider ')
@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.provider.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.provides.add_provider')</h5>

            <form class="form-horizontal" action="{{route('admin.provider.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="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="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 class="col-lg-6 form-group">
     <label for="password_confirmation" class="col-xs-12 col-form-label">@lang('admin.provides.password_confirmation')</label>
					<div class="col-xs-12">
						<input class="form-control" type="password" name="password_confirmation" id="password_confirmation" 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="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="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="Mobile">
					</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="avatar" class="dropify form-control-file" id="picture" aria-describedby="fileHelp">
					  </div>
   <br>
   <div class="col-xs-12">
   </div>
				<div class="form-group">
					<div class="col-xs-12" style="bottom: -8px;">
						<button type="submit" class="btn btn-primary">@lang('admin.provides.add_provider')</button>
						<a href="{{route('admin.provider.index')}}" class="btn btn-default">@lang('admin.cancel')</a>
					</div>
				</div>
                                    
</div>
                


				<div class="form-group row">
					<!-- <label for="zipcode" class="col-xs-12 col-form-label"></label>
					<div class="col-xs-12 rr">
						<button type="submit" class="btn btn-primary">@lang('admin.provides.add_provider')</button>
						<a href="{{route('admin.provider.index')}}" class="btn btn-default">@lang('admin.cancel')</a>
					</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