@extends('layouts.app')
@section('content')
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dc-col m7">
  <div class="dc-row-padding">
    <div class="dc-col m10">
      <div class="dc-card dc-round dc-white">
        <div class="dc-container dc-padding">
          <h4 class="dc-opacity">Contact and Address Information</h4>
            
            <form name="addinfo" class="additional-form" action="">

              <fieldset>
                <legend>Personal Info</legend>
                <div class="colums ">
                  <div class="item " >
                    <label for="birthdate">Birthdate<span>*</span></label>
                    <input id="birthdate" type="date" name="birthdate" value="" placeholder = "" required/>
                  </div>
                  <div class="item">
                    <label for="birthplace">Birth Place</label>
                    <input id="birthplace" type="text" name="birthplace"  value="" required/>
                  </div>     
                </div>     
              </fieldset>
              <br>              
              <fieldset>
                <legend>Contacts</legend>
                <div class="colums ">
                  <div class="item " >
                    <label for="mobile">Mobile Number<span>*</span></label>
                    <input id="mobile" type="number" name="mobilenumber" value="" placeholder = "Ex. 09102345678" required/>
                  </div>
                  <div class="item">
                    <label for="phone"> Phone Number</label>
                    <input id="phone" type="text" name="phonenumber"  value="" />
                  </div>     
                </div>     
              </fieldset>
              <br>
              <fieldset>
                <legend>Address</legend>
                  <div class="item " >
                    <label for="home">Home Address<span>*</span></label>
                    <input id="home" type="text" name="home" value="" placeholder = "House No./Block/Street, Barangay, Municipality/City, Province" required/>
                  </div>
                  <div class="item">
                    <label for="shipping"> Shipping Address</label>
                    <input id="shipping" type="text" name="shipping"  placeholder = "House No./Block/Street, Barangay, Municipality/City, Province" value="" />
                  </div> 
                  <br>
                  <div class="item">
                    {{csrf_field()}}
                    <button type="submit" class="btn btn-register btn-addinfo">Save</button>
                  </div>       
              </fieldset>
              <br/>
            </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="loading">
  <div id="spin"><img src="{{ asset('images/spinner_green.gif')}}"/></div>
</div>

<script type="text/javascript">
  $(function(){
      $( "form" ).on( "submit", function(e) {
          $("#error").hide();
          $("#success").hide();
          $("#loading").show();
          var dataString = $(this).serialize();              
          $.ajax({
            type: "POST",
            url: "/addinfo{{ $subs }}",
            data: dataString,
            success: function (data) {
              //console.log(data);
              $("#loading").hide();
              setTimeout(function(){
                @if(empty($subs))
                  window.location.replace("/dashboard");
                @else
                  window.location.replace("{{ $subs }}");
                @endif
              },800);
            }
          });
          e.preventDefault();
      });
  });
</script>
@endsection