@extends('layout.layout')
@section('content')

<form method="post" action="/update">
    {{ csrf_field() }}

    <div class='container'>
        <h1>Editing {{ Auth::user()->first_name }} {{Auth::user()->last_name}}'s Account</h1>
        <h2>Personal Information</h2>
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="firstName"> First Name</label>
            <input type="text" class="form-control" id="firstName" name="firstName" placeholder="" value="{{Auth::user()->first_name}}" required>
          </div>
          <div class="col-md-6 mb-3">
            <label for="lastName">Last name</label>
            <input type="text" class="form-control" id="lastName" name="lastName" placeholder="" value="{{Auth::user()->last_name}}" required>
          </div>
        </div>

		<div class="row">
	      <div class="col-md-4">
            <select name="country" class="countries order-alpha" id="countryId">
                <option value="">Select Country</option>
            </select>
	      </div>
	      <div class="col-md-4">
	        <label for="province">Province</label>
	            <select name="state" class="states order-alpha" id="stateId">
	                <option value="">Select State</option>
	            </select>
	      </div>
			<div class="col-md-4">
	        <label for="city">City</label>
                <select name="city" class="cities order-alpha" id="cityId">
                    <option value="">Select City</option>
                </select>
	      </div>
	    </div>
	    <br>
        <div class="row">
	      <div class="col-md-6 mb-3">
	        <label for="address">Shipping Address</label>
	        <input type="text" class="form-control" id="address" name="address" placeholder="" value="{{Auth::user()->address}}" required>
	      </div>
	      <div class="col-md-6 mb-3">
	        <label for="zip_postal">Zip Code</label>
	        <input type="text" class="form-control" id="zip_postal" name="zip_postal" placeholder="" value="{{Auth::user()->zip_postal}}" required>
	      </div>
        </div>
        <div class="form-group">
      		<button type="submit" class="btn btn-primary">Update</button>
    	</div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="//geodata.solutions/includes/countrystatecity.js"></script>
	</div>
</form>
@endsection