How to add number of days to start date in to get end date

In my Laravel-5.8 application, I am working on Employee Leave Project. I have this model:

Model:

class Leave extends Model
{
    protected $fillable = [
        'employee_id',  'datefrom', 'dateto','number_of_days', 'description'
    ];

    public function employee()
    {
        return $this->belongsTo('App\Employee', 'employee_id', 'id');
    }

    public function pointOfContact()
    {
        return $this->belongsTo('App\Employee', 'point_of_contact', 'id');
    }
}

Controller

public function store(Request $request)
{
    $this->validate($request, [
        'datefrom' => 'required',
        'dateto' => 'required|after_or_equal:datefrom',
    ]);
    $employee_id = Auth::User()->id;
    $leave_type = $request->leave_type;

    $dateFromTime = Carbon::parse($request->datefrom);
    $dateToTime = Carbon::parse($request->dateto);

    $consumed_leaves = $dateToTime->diffInDays($dateFromTime) + 1;

    $leave = Leave::create([
        'employee_id' => $employee_id,
        'datefrom' => $dateFromTime,
        'dateto' => $dateToTime,
        'description' => $request->description,
        'number_of_days' => $request->number_of_days,
    ]);


    if ($leave) {
        return redirect()->route('leave.index')->with('success', 'Leave is created succesfully');
    }
}

view blade

<div class="card-body">
<form class="form-horizontal" action="{{route('leaves.store')}}" method="post">
{{csrf_field()}}
	<div class="form-body">
	 <h3 class="box-title">Create Leave</h3>
	 <hr class="m-t-0 m-b-40">
	 <div class="row">
	 <div class="col-md-6">
		 <div class="form-group row">
			 <div class="col-md-9">
						<div class="row">
							<div class="col-md-6">
								<div class="form-group row">
									<label class="control-label text-right col-md-3">From Date</label>
									<div class="col-md-9">
										<input type="date" class="form-control"   name="datefrom" value="{{old('datefrom')}}"  min="{{Carbon\Carbon::now()->format('Y-m-d')}}">
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group row">
									<label class="control-label text-right col-md-3">To Date</label>
									<div class="col-md-9">
										<input type="date" class="form-control" placeholder="dd/mm/yyyy" name="dateto" value="{{old('dateto')}}" min="{{Carbon\Carbon::now()->format('Y-m-d')}}">
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							</div>
							<div class="col-md-6">
								<div class="form-group row">
									<label class="control-label text-right col-md-3">Number of Days</label>
									<div class="col-md-9">
										<input type="text"  class="form-control" name="number_of_days" id="number_of_days" value="{{old('number_of_days')}}">
									</div>
								</div>
							</div>
							<!--/span-->
						</div>
						<div class="row">
							<div class="col-md-6">
								<div class="form-group row">
									<label class="control-label text-right col-md-3">Description</label>
									<div class="col-md-9">
										<textarea type="text" class="form-control" rows="3" name="description" placeholder="Enter Description Here">{{old('description')}}</textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
					<hr>
					<div class="form-actions">
						<div class="row">
							<div class="col-md-6">
								<div class="row">
									<div class="col-md-offset-3 col-md-9">
										<button type="submit" class="btn btn-success">Apply</button>
										<a href="{{route('leave.index')}}" class="btn btn-inverse">Cancel</a>
									</div>
								</div>
		    </div>
		    <div class="col-md-6"> </div>
		</div>
	   </div>
	 </form>
  </div>

Javascript

<script type="text/javascript">
    $(document).ready(function() {
        $(function () {
            $('#datefrom').datetimepicker({
                format: "YYYY-MM-DD"
            });
            $('#dateto').datetimepicker({
                format: "YYYY-MM-DD"
            });
        });
    });
</script>

Currently in the project, the user selects the datefrom and dateto from the datepicker to determine the number_of_days.

But the requirements states that only datefrom should be selected and also a text input for number_of_days

How do I make the dateto to be locked, then the user selects only datefrom and number_of_days. Once number_of_days loses focus, the application automatically datefrom and number_of_days to determine dateto?

Thanks