@extends('layouts.login')

@section('title', 'Create Profile | ')

@section('content')    

<div class="content container-fluid">
          
    <div class="row">

        <div class="col-lg-9 offset-3" >
            
            <div class="panel panel-default holder">
            <div class="panel-body" style="min-height: 750px;">

              <div class="row">          
                  <div class="col-md-8 text-center">
                   <a class="" href="{{ url('/home') }}">
                        <img style="height: 100px; object-fit: cover; padding: 20px; " class="logo" src="{{ asset('images/logo.png') }}">
                    </a>
                  </div>        
              </div>

            <div class="userFormcover" >                          

              <form action="/newUser/{{Request::segment(2)}}/{{ Request::segment(3) }}" method="post">

                {{ csrf_field() }}
                    
                <legend class="" style="margin-bottom: 4px;">Fill the form to complete your profile.</legend>

                  <small >After completing the profile then login into the Techsaga CRM, do post on project, comments and track the progress...</small>
                  
                  <div class="row" style="margin-top: 20px;"> 

                    <div class="col-md-8 form-group @if ($errors->has('first_name')) has-error @endif">
                     <label class="control-label">First Name</label>  
                     <input type="text" name="first_name" class="form-control" value="{{$user->first_name}}"> 
                     @if ($errors->has('first_name')) <p class="help-block text-danger">{{ $errors->first('first_name') }}</p> @endif                  
                    </div> 
                  </div>

                  <div class="row">    
                    <div class="col-md-8 form-group ">
                      <label class="control-label" for="last_name">Last Name</label>
                      <input type="text" name="last_name" class="form-control" value="{{$user->last_name}}">
                    </div> 
                  </div> 

                  <div class="row">    
                    <div class="col-md-8 form-group @if ($errors->has('phone_number')) has-error @endif">
                      <label class="control-label" for="phone_number">Phone </label>
                        <input type="hidden"  id="code" name ="primary_phone_code" value="971" >
                        <input type="hidden"  id="iso" name ="primary_phone_iso" value="ae" >
                        <input type="tel" name ="phone_number" id="phone1" value="" style='display:block'>
                      
                      @if ($errors->has('phone_number')) <p class="help-block text-danger">{{ $errors->first('phone_number') }}</p> @endif 
                    </div> 
                  </div> 

                  <div class="row">    
                    
                    <div class="col-md-8 form-group @if ($errors->has('email')) has-error @endif">
                        <label class="control-label" for="email">Email Address </label>
                        <input type="text" class="form-control" name="email"  value="{{$user->email}}">
                         @if ($errors->has('email')) <p class="help-block text-danger">{{ $errors->first('email') }}</p> @endif 
                    </div> 
                      
                  </div>  
                  <div class="row">
                    <div class="col-md-8 form-group @if ($errors->has('password')) has-error @endif">
                      <label class="control-label" for="password">Password</label>
                      <input type="password" name="password" class="form-control" value="{{ old('password') }}">
                       @if ($errors->has('password')) <p class="help-block text-danger">{{ $errors->first('password') }}</p> @endif 
                    </div> 
                      
                  </div>

                   <div class="row">
                    <div class="col-md-8 form-group @if ($errors->has('password_confirmation')) has-error @endif">
                      <label class="control-label" for="password_confirmation"> Confirm Password</label>
                      <input type="password" name="password_confirmation" class="form-control " value="{{ old('password_confirmation') }}">
                       @if ($errors->has('password_confirmation')) <p class="help-block text-danger">{{ $errors->first('password_confirmation') }}</p> @endif 
                    </div>  
                      
                  </div>                                            

                   <!-- Submit Form Button -->
                  {!! Form::submit('Submit', ['class' => 'btn btn-sm btn-primary']) !!}
                {!! Form::close() !!}

                </div>
              </div>
        </div>
    </div>
</div>
</div>
@endsection


<script type="text/javascript">

$("#phone1").intlTelInput({
    initialCountry: "ae",
    separateDialCode: true,
    preferredCountries: ["ae", "in", "sa"],
    geoIpLookup: function (callback) {
        $.get('https://ipinfo.io', function () {
        }, "jsonp").always(function (resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            callback(countryCode);
        });
    },
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
});

/* ADD A MASK IN PHONE1 INPUT (when document ready and when changing flag) FOR A BETTER USER EXPERIENCE */

var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);

$(document).ready(function () {
    $('#phone1').mask(mask1)
});

$("#phone1").on("countrychange", function (e, countryData) {
    $("#phone1").val('');
    var mask1 = $("#phone1").attr('placeholder').replace(/[0-9]/g, 0);
    $('#phone1').mask(mask1);
    $('#code').val($("#phone1").intlTelInput("getSelectedCountryData").dialCode);
});

// phone2
$("#phone2").intlTelInput({
    initialCountry: "ae",
    separateDialCode: true,
    preferredCountries: ["ae", "in", "sa"],
    geoIpLookup: function (callback) {
        $.get('https://ipinfo.io', function () {
        }, "jsonp").always(function (resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            callback(countryCode);
        });
    },
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.14/js/utils.js"
});

/* ADD A MASK IN PHONE2 INPUT (when document ready and when changing flag) FOR A BETTER USER EXPERIENCE */

var mask1 = $("#phone2").attr('placeholder').replace(/[0-9]/g, 0);

$(document).ready(function () {
    $('#phone2').mask(mask1)
});

$("#phone2").on("countrychange", function (e, countryData) {
    $("#phone2").val('');
    var mask1 = $("#phone2").attr('placeholder').replace(/[0-9]/g, 0);
    $('#phone2').mask(mask1);
    $('#code2').val($("#phone2").intlTelInput("getSelectedCountryData").dialCode);
});
// 

</script>